Question

我目前有以下JS Fiddle在内容可编辑输入中显示带有背景图像的div。我希望能够将div强调为文本。

＆＃13;

.input {
  border: 1px solid black;
  width: 200px;
}

.emoji {
  width: 16px;
  height: 16px;
  background-size: contain;
  display: inline-block;
  background-image: url(https://twemoji.maxcdn.com/2/72x72/1f609.png);
}

＆＃13;

<div contenteditable="true" class="input">
    <div class='emoji'/>
</div>

＆＃13;

请注意上面的小提琴如何用鼠标突出显示表情符号，好像它是文本一样，不能正确地突出显示表情符号。

我尝试了以下两种解决方案，但它们没有用。

1）在表情符号div上设置tab-index="-1"并添加以下css以设置背景颜色以使表情符号突出显示

.emoji {
    &:focus {
        background-color: #338fff;
    }
}

2）使用::selected css并设置背景颜色以使其突出显示

.emoji {
    &:selected {
        background-color: #338fff;
    }
}

感谢任何帮助！

Answer 1

将表情符号div更改为图像标记，并将其链接到透明源。

#input {
  border: 1px solid black;
  width: 200px;
}

.emoji {
  width: 16px;
  height: 16px;
  background-size: contain;
  display: inline-block;
  background-image: url(https://twemoji.maxcdn.com/2/72x72/1f609.png);
}

<div contenteditable="true" id="input">
  <img src="http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" class="emoji"/>
</div>

Answer 2

你的要求并不是很清楚。以下内容如何为您服务？

＆＃13;

.input {
  border: 1px solid black;
  height:27px;
  width: 200px;
}

.emoji {
  width:16px;
  height:16px;
  background-size: contain;
  margin:0 auto;
  margin-top:6px;
 

  display: block;
  background-image: url(https://twemoji.maxcdn.com/2/72x72/1f609.png);
}

#a1{
width:173px;
display:block;
float:right;
line-height:1.1;
}

#a2{
display:inline-block;
 background-color: #338fff;
 width:27px;
 height:27px;}

＆＃13;

<div  class="input">
   <div id='a2'>
       <div class='emoji' ></div>
   </div>    
  <div id='a1' contenteditable="true">1234</div>
</div>

＆＃13;

突出显示内容可编辑输入中的div元素，就像它是文本一样

2 个答案: