How to make a div to a input text form?

There is some drawbacks using textarea and input-text as input of text forms. textarea has a little annoying triangle in right-lower corner and input-text is a single-line input.

I try to have a input of text l开发者_运维知识库ike the facebook update input form. The input auto resize after linebreaks. And the element or tag used was <div>. I said "used" because, after they redesigned Facebook, I can't figure-out which tag is used now. There is CSS property that enables the user to edit the text in a div element. I actually copied the CSS property, but now I lost it. Can someone tell me which CSS property it was? I have a weak memory that it began with the -webkit prefix though

If you use html5 you can use:

<div id="divThatYouCanWriteStuffIn" contenteditable>
<!-- you can write in here -->
</div>

If you couple this with the css:

#divThatYouCanWriteStuffIn {
    min-height: 4em; /* it should resize as required from this minimum height */
}

To get rid of the 'annoying little triangle' in textareas:

textarea {
  resize: none;
}

JS Fiddle demo of both ideas.

I know you can do this in javascript by doing getElementByID('mydiv').contentEditable='true';, but I do not know how this would be done in CSS

The Facebook update input field is a TEXTAREA element. The trick is to use the resize property:

textarea { resize:none; }

That will make the triangle disappear.

You should be able to add your style to a textarea like you do with tags like p, h1, h2 etc..

So you can target all textareas or ones with specific classes or ids on them

Example:

textarea    {
    font-size:11px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:normal;
    line-height:140%;
    color:black;
    margin:0 0 5px 5px;
    padding:5px;
    background-color:#999999;
    border:1px solid black;
}

This example will target all textareas on the page. Change textarea to .nameOfClass or #nameOfId if you want to target a class or an id.

Hope this helps.