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

Question

我目前有以下 JS Fiddle 在内容可编辑输入中显示带有背景图像的 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>

请注意，在上面的 fiddle 中，尝试用鼠标突出显示表情符号，就好像它是文本一样，并没有正确突出显示表情符号。

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

1) 在 emoji div 上设置一个 tab-index="-1" 并添加以下 css 来设置背景颜色，使 emoji 看起来突出显示

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