I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with Google Chrome.
Whenever I click on a div element styled with user-select: none, the selected text within the contenteditable div gets lost. Below is the HTML and CSS code snippet for reference:
<div id="editor">
<div id="controls">
<div id="button-bold"></div>
</div>
<div id="rte" contenteditable></div>
</div>
CSS
#button-bold
{
width: 20px;
height: 20px;
padding: 2px;
float: left;
border: 1px solid #E7E7E5;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#rte {
width: 100%;
min-height: 400px;
margin: 5px;
outline: none;
}