Question

测试下面的代码，你会在contenteditable div中找到一个大光标。如果删除规则:empty:before，则光标问题似乎已修复，但占位符也消失了。所以我想知道如何将光标设置为正常大小但同时保留占位符？

 <html>
    <div id="comment_box" contenteditable="true" autocomplete="off" spellcheck="false" placeholder="Click me to see Omg what a big cursor"></div>

<style>

#comment_box{
    text-align: center;
  background-color: white;

  /*position:relative;*/
  border: 1px solid orange;
  /*height:60px;*/
  width: 500px;
  padding: 10px;
  color:black;
  border-radius:5px;
  /*font-size:18px;*/
  display: inline-block;
  text-align: left;
  vertical-align: bottom;

  /*border-color:yellow;*/
}
#comment_box:focus{
  outline-style:solid;
  outline-color:orange;
  outline-width:0px;
}


[contenteditable=true]:empty:before{
  content: attr(placeholder);
  color: #aaa;
  display: block;  For Firefox 
 }

</style>
</html>

HTML BUG挑战：如果使用占位符，则为contenteditable div的大光标

0 个答案: