How to disable text selection highlighting using CSS?

If you’re looking to disable text selection using CSS, all you have to do is to add the user-select CSS property.

According to Can I use, the user-select is currently supported in all browsers except Internet Explorer 9 and earlier versions.


  
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
  

This is still an experimental feature so please make sure you check the Browser Compatibility table from the url above carefully before using this in production. Another thing to consider is that this feature is not guaranteed to work everywhere, and there could be differences in implementation between different browsers.

Andy

Front-end Engineer & Designer based in Dublin currently working @IBM.
I write about: Javascript, HTML, CSS, React JS, React Native and UI/UX Design.

Add comment