user-select:none breaking Safari contenteditable

user_1008834 0
Viewed 5837

I have a div with contenteditable="true". I can enter text into the div with IE, Chrome and Firefox but not Safari. I finally tracked the problem down to the style declarations below given to the container of the div.

container {
    -webkit-user-select : none;
    -moz-user-select    : none;
    -khtml-user-select  : none;
    -ms-user-select     : none;  
}

I put these in a while ago per Chrome taking first double-click to keep the container from turning blue when it was double-clicked. Now I'm just finding out that that solution breaks Safari contenteditable.

Does anyone know exactly what these things are doing and why they break Safari contenteditable?

safari contenteditable css html
4 Answers

I found a solution which works for me.

*[contenteditable]:empty {
    caret-color: rgba(0,0,0,0);
}

Then either animate the left border flashing or simply style the input in a way which indicates focus.

user_31233170
Related