How to convert a DIV into a TEXTAREA

Posted By : Balraj Singh | 17-Nov-2014

First of all we take a simple div and have to write an attribute (contenteditable="true") :-

<div contenteditable="true"> <⁄div>

 

And the CSS is :-

    div {
      border: 1px solid gray;
      min-height: 50px;  /* if you want Flexible textarea/div then give min-height instead of height */
      overflow: auto; 
      padding: 2px;
      resize: both;
      width: 400px;
      font-size:15px;
      color:#000;
    }

Now DIV tag work like TEXTAREA.

 

If you want a placeholder, it is also possible.

In DIV tag you have to write an attribute placeholder like same as TEXTAREA (placeholder="I look like a textarea") :-

<div contenteditable="true" placeholder="I look like a textarea"> <⁄div>

 

and CSS for Placeholder is :-

    div:empty:before{
      content: attr(placeholder);
      color: #ccc;
    }

Now DIV tag work like TEXTAREA with Placeholder. :)

THANKS

About Author

Author Image
Balraj Singh

Balraj is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Balraj likes playing tech Quiz and loves bike riding.

Request for Proposal

Name is required

Comment is required

Sending message..