{"id":15568,"date":"2011-12-14T08:55:20","date_gmt":"2011-12-14T15:55:20","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=15568"},"modified":"2016-07-25T13:34:01","modified_gmt":"2016-07-25T20:34:01","slug":"user-select","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/u\/user-select\/","title":{"rendered":"user-select"},"content":{"rendered":"

The user-select<\/code> property in CSS controls how the text in an element is allowed to be selected. For example, it can be used to make text unselectable.<\/p>\n

.row-of-icons {\r\n  -webkit-user-select: none;  \/* Chrome all \/ Safari all *\/\r\n  -moz-user-select: none;     \/* Firefox all *\/\r\n  -ms-user-select: none;      \/* IE 10+ *\/\r\n  user-select: none;          \/* Likely future *\/      \r\n}<\/code><\/pre>\n
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). However it’s a bit buggy. Firefox enforces the fact that any text matching that selector cannot be copied. WebKit still allows the text to be copied if you select elements around it. <\/p>\n
You can also use this to enforce that an entire element gets selection:<\/p>\n
.force-select {  \r\n  -webkit-user-select: all;  \/* Chrome 49+ *\/\r\n  -moz-user-select: all;     \/* Firefox 43+ *\/\r\n  -ms-user-select: all;      \/* No support yet *\/\r\n  user-select: all;          \/* Likely future *\/   \r\n}<\/code><\/pre>\n
Here’s some demos of those:<\/p>\n
See the Pen user-select demo<\/a> by Chris Coyier (@chriscoyier<\/a>) on CodePen<\/a>.<\/p>\n
There was no spec for this property for quite a while, but now is covered under CSS Basic User Interface Module Level 4<\/a>. <\/p>\n
The default value is auto<\/code>, which makes selection happen normally as you expect. “Normally” is a bit complicated. It’s worth quoting from the spec here:<\/p>\n
\n