So recently I had to disable text selection for some web pages and after a quick Google search I realized that this could be achieved through CSS – great stuff!! 😀
First thing I did was create a new HTML page, wrote some dummy text and applied some CSS to test it out. Loaded the HTML in the browser and tried to select the dummy text. The text could not be select – awesome! The CSS I tried out was the following;
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; |
The different styling is added to ensure that the styling is rendered properly on different web browsers. I then dug a bit deeper and tried out different CSS implementations related to text selection. I create a working JSFiddle with the said CSS and it can be accessed via this link. The JSFiddle has three different styles
- No text selection
- One click, all text selection
- Different colors shown when selecting text
Until next time,
Bjorn
It's not a bug, it's a feature 