Make DIV stylized as textarea and containing formatted text editable

Question

I have this div:

<div class="textarea"></div>

which I stylized as textarea with this css:

.textarea {
    -moz-appearance: textfield-multiline;
    -webkit-appearance: textarea;
    border: 1px solid gray;
    font: medium -moz-fixed;
    font: -webkit-small-control;
    height: 28px;
    overflow: auto;
    padding: 2px;
    resize: both;
    width: 100%;
}

Now, If I add some html code inside this div, even the cursor is not shown there. Can I make this div editable?

Answer 1

Just change the contentEditable attribute to true, and you're sorted

 .textarea { -moz-appearance: textfield-multiline; -webkit-appearance: textarea; border: 1px solid gray; font: medium -moz-fixed; font: -webkit-small-control; height: 28px; overflow: auto; padding: 2px; resize: both; width: 100%; }

 <div class="textarea" contentEditable="true"></div>