html - Highlight a div element in a content editable input as if it was text
问题描述
I current have the following JS Fiddle showing a div with a background image in a content editable input. I would like to be able to highlight the div as if it were text.
.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>
Notice how in the fiddle above attempting to highlight the emoji with the mouse as if it were text does not highlight the emoji properly.
I have tried the following 2 solutions but they have not worked.
1) Setting a tab-index="-1"
on the emoji div and adding the following css to set the background color to make the emoji look highlighted
.emoji {
&:focus {
background-color: #338fff;
}
}
2) Using the ::selected
css and setting the background color to make it look highlighted
.emoji {
&:selected {
background-color: #338fff;
}
}
Any help is appreciated!
解决方案
Change the emoji div to an image tag and link it to a transparent source.
#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>
推荐阅读
- python - 如何在 Python 中使用 OpenCV 检测相似路径中的平行线?
- symfony - 服务“Doctix.twig_extension”依赖于 symfony 3 中不存在的服务“请求”
- python - 我如何在同一个图中绘制三个直方图,其中每个直方图必须代表一系列值?
- java - 打印空盒子?
- sublimetext3 - 崇高文本 sftp 隧道 wbond
- php - Laravel 中的“updateOrCreate”的批量分配问题,为什么?
- ios - Xcode 10故事板不显示元素,只有蓝色边框
- elasticsearch - 弹性搜索:查询以获取所有元素
- javascript - 如何检查间隔是否中断?
- c - 如何从 main() 之外的函数返回指针