首页 > 其他 > 详细

看起来像一个 textarea 的 div

时间:2021-04-10 00:41:52      阅读:21      评论:0      收藏:0      [点我收藏+]

看起来像一个 textarea 的 div

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

<div class="box" contenteditable="true" placeholder="我看起来像一个 textarea"></div>
<style>
  textarea {
    height: 28px;
    width: 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;
    width: 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/

看起来像一个 textarea 的 div

原文:https://www.cnblogs.com/daysme/p/14638357.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!