How-to: Making elements unselectable using CSS user-select

I just discovered that a very clean and easy to use soloution exists where you using CSS can make elements . Sometimes you do not want the content of some elements selectable, so with this soloution you can simply add a class “”.

 

The syntax

You can see links to pages containing more info, but the syntax is “” with vendor prefixes. The values are “none | text | toggle | element | elements | all | inherit” according to a draft specifications on w3c. I am not sure if Opera actually has implementer this feature.

Example

This block you can select (default action).

 

This block you cannot select as it has the class “unselectable” applied.

 

dummyimage.com lets you create image in given size and colour just using an URLYou can select the text but not the image, it has “textOnlySelectable”

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.

The code

.unselectable { -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;

-ms-user-select: none; user-select: none; } .textOnlySelectable { -moz-user-select: text; -khtml-user-select: text; -webkit-user-select: text; -o-user-select: text;

-ms-user-select: text; user-select: text; }

 

Links
US

Leave a Reply