Make <li> tags editable

Question

I need something like html <ul> list.

It should contains bullets and something like textarea.

textarea{
  border : none;
}
.custom-txt-area{border-bottom : 1px dashed red;}

<ul>
  <li>
    <textarea class="custom-txt-area" rows="1"></textarea>
  </li>
  <li>
    <textarea class="custom-txt-area" rows="1"></textarea>
  </li>
</ul>

This is very sample example. Problem here - I can't make textarea extend it height to the bottom if it contans more than 1 row.

Answer 1

Maybe you are looking for contentEditable:

jsFiddle

<ul>
      <li contenteditable="true">Edit ME!</li>
      <li contenteditable="true">Edit ME!</li>
      <li contenteditable="true">Edit ME!</li>
      <li contenteditable="true">Edit ME!</li>
      <li contenteditable="true">Edit ME!</li>
      <li contenteditable="true">Edit ME!</li>
    </ul>