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

Question

我目前有以下JS小提琴在内容可编辑的输入中显示带有背景图像的div。 我希望能够像显示文本一样突出显示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" class="input"> <div class='emoji'/> </div> 

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

我尝试了以下2个解决方案，但它们没有起作用。

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

不清楚您要问什么。 以下内容如何为您服务？

 .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;} 

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