I currently have a unique JS Fiddle demonstrating a div with a background image inside a content editable input. My goal is to highlight the div as if it were regular 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>When you look at the fiddle above, highlighting the emoji with the mouse does not work properly as expected.
I attempted two solutions but they did not yield the desired results:
1) I tried setting a tab-index="-1" on the emoji div and applied CSS to adjust the background color to simulate highlighting the emoji when selected.
.emoji {
&:focus {
background-color: #338fff;
}
}
2) Additionally, I used the ::selected selector in CSS with no success in changing the background color to indicate the selection of the emoji.
.emoji {
&:selected {
background-color: #338fff;
}
}
If anyone can provide assistance or suggestions, I would greatly appreciate it!