看起来像一个 textarea 的 div

看起来像一个 textarea 的 div

做简单的富文本编辑器时可能会用到。

<div class="box" contenteditable="true" placeholder="我看起来像一个 textarea"></div>
<style>
  textarea {
    height: 28px;
     400px;
  }

  .box {
    -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: vertical;
     400px;
  }

  .box[contenteditable="true"]:empty:before {
    content: attr(placeholder);
    display: block;
    color: #ccc;
  }
</style>

参考 https://blog.thinkingstiff.com/2012/01/22/how-to-make-a-contenteditable-look-like-an-element-or/