11
I’m learning front-end and came across on that website with a CSS property called user-select, I didn’t understand what it was for and I couldn’t find a good explanation.
I’d like you to explain to me what it’s for, how and when to use this user-select. Not only in the case cited on the site above.
12
Long live!
The CSS property user-select serves to control which text the user can or cannot select.
auto: Controlled by the browser, the behavior may be different depending on the browser being used.
element: The user can only select content inside the widget.
None: You cannot select any content.
text: The user can only select text inside the widget.
Chrome: All versions.
Safari: All versions.
Firefox: All versions.
Opera: Version 27 or higher.
IE: Version 10 or higher.
Android: Version 4.1 or later.
iOS: Version 7.1 or later.
An example where this property can be useful is when you want to offer the user a simpler way to do copy|Paste. Thus avoiding the selection of useless things such as images.
A website where you can read more about this property is: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select.
I leave you here a small practical example that I have found, to try to facilitate the understanding of what I have tried to explain:
.unselectable {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}<p class="unselectable">Não vais conseguir seleccionar este texto!</p>Good, I was seeing this same content to explain how to answer hehe. Maybe you could edit and put more information (such as the accepted parameters and the browsers/versions in which it works) for more 'lazy users''.
Thanks for the tip, I’ve added! ;)
12
In a simple way the user-selection serves to control the content that can be selected on the website.
User-select accepts four values:
text - text can be selected
element - the text can be selected, being restricted to the limits of the element
None - text cannot be selected
auto – If the widget contains editable text, such as an input element or element with editable content, the text can be selected. Other forms of selection are determined by the value of the parent node.
-moz-user-select: none;
-moz-user-select: text;
-webkit-user-select: none;
-webkit-user-select: text;
-ms-user-select: none;
-ms-user-select: text;
-ms-user-select: element;
-moz, -webkit, -ms these "markings" in front of the user-select refer to each browser.
-moz to Mozilla
-ms for internet explorer
-webkit for Chrome
You can use when you feel the need to control the content that is selected on the site.
In this website it shows how works the different types that the user-select supports.
In this website has a table showing which browsers have support and their referred versions.
References:
Browser other questions tagged css front-end
You are not signed in. Login or sign up in order to post.
lol why edit and take the line I thank for helping? It’s against the rules to be polite?
– Andrey Hartung
Why is not relevant to the doubt.
– MeuChapeu
The @Meuchapeu response is quite complete, just to complement, check which (is) and which version(s) of browser you intend to use, as older versions do not allow.
– WyllianNeo