user-select:none breaking Safari contenteditable

user-select

This property controls the actual Selection operation⁰. This is useful in situations where you want to provide an easier/cleaner copy-paste experience for users (not have them accidentally text-select useless things, like icons or images).¹

Example of how the property works: http://jsfiddle.net/chriscoyier/vGG8F/3/

Possible Solutions

Since Safari is built on webkit -webkit-user-select : none; is the culprit. Removing that will allow the contenteditable to work again. However, you need that due to your original problem.

1. Others have run into the same problem which may provide a solution.

   • contenteditable div not actually editable in webkit
   • Losing selected text from contenteditable on clicking div with css user-select: none;
   • ContentEditable focus in Chrome/Safari

2. You could also catch the double click as suggested in your first question and then disable the -webkit-user-select allowing the div to be editable. Once the editing is complete -webkit-user-select could be set back to none.

⁰ https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
¹ http://css-tricks.com/almanac/properties/u/user-select/

Use CSS pseudo-element ::selection. Chrome, for example, supports it from version 1.

Let me add a bit to JSuar's answer. Not only -webkit-user-select: none; kills the contenteditables, but -khtml-user-select: none; also does. However, setting explicit -webkit-user-select: text; or -webkit-user-select: auto; does the job disabling both of them.