Question

我使用contenteditable div来获取用户的输入。但是，单击时会显示一个大光标，该光标位于可信任的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>

使用占位符

0 个答案: