How to create a text area with an unusual shape with HTML and CSS?

Spread the love

Sometimes, we want to create a text area with an unusual shape with HTML and CSS.

In this article, we’ll look at how to create a text area with an unusual shape with HTML and CSS.

How to create a text area with an unusual shape with HTML and CSS?

To create a text area with an unusual shape with HTML and CSS, we use a contenteditable element.

For instance, we write

<div
  style="border: 1px blue solid; width: 200px; height: 200px"
  contenteditable="true"
>
  <div
    style="float: left; width: 50px; height: 50px; border: 1px solid blue"
    contenteditable="false"
  ></div>
  <div
    style="float: right; width: 50px; height: 50px; border: 1px solid blue"
    contenteditable="false"
  ></div>
  hello world, hello world
</div>

to set the contenteditable attribute to true to let us edit the contents of the div.

And we can apply whatever styles we want to them.

Conclusion

To create a text area with an unusual shape with HTML and CSS, we use a contenteditable element.

Leave a Reply

Your email address will not be published.