我目前有以下 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;
}
}
感谢任何帮助!
最佳答案
将表情符号 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>
关于html - 突出显示内容可编辑输入中的 div 元素,就好像它是文本一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50649515/