- user-select¶
- Демо¶
- Синтаксис¶
- Значения¶
- Примечание¶
- Спецификации¶
- Поддержка браузерами¶
- Описание и примеры¶
- Disable Text Selection Highlighting In HTML Using CSS
- Using user-select:none: #
- In Google Chrome: #
- In mozilla firefox: #
- In Safari: #
- In IOS Safari: #
- In Internet Explorer/Edge using: #
- What does user-select property will do? #
- user-select property values: #
- user-select none: #
- user-select text: #
- user-select all: #
- user-select auto: #
- user-select contain: #
- user-select CSS example: #
- user-select:none
- user-select:text
- user-select:all
- user-select:auto
- user-select:contain
- 👋 Stay in the loop
- How to disable text selection with CSS
- How to disable text selection in CSS
- Top comments (8)
user-select¶
Свойство user-select управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста.
Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.
Демо¶
Синтаксис¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
/* Keyword values */ user-select: none; user-select: auto; user-select: text; user-select: contain; user-select: all; /* Global values */ user-select: inherit; user-select: initial; user-select: unset; /* Mozilla-specific values */ -moz-user-select: none; -moz-user-select: text; -moz-user-select: all; /* WebKit-specific values */ -webkit-user-select: none; -webkit-user-select: text; /* Doesn't work in Safari; use only "none" or "text", or else it will allow typing in the container */ -webkit-user-select: all; /* Microsoft-specific values */ -ms-user-select: none; -ms-user-select: text; -ms-user-select: element;
Значения¶
auto Для редактируемых элементов значение принимается contain . Если у родителя значение user-select установлено как all , то для элемента оно тоже будет all . Если у родителя значение user-select установлено как none , то для элемента оно тоже будет none . Во всех остальных случаях принимается значение text . none Пользователю запрещено выделять элемент. text Пользователь может выделить текст в элементе. all Позволяет выделить текст внутри элемента, включая дочерние элементы. contain Позволяет выделять текст, но только внутри границ элемента.
Примечание¶
- Internet Explorer поддерживает свойство -ms-user-select .
- Chrome, Opera, Safari и Android поддерживают свойство -webkit-user-select .
- Firefox поддерживает свойство -moz-user-select .
- Значение contain поддерживается только в IE.
Значение по-умолчанию: auto
Применяется ко всем элементам
Спецификации¶
Поддержка браузерами¶
Can I Use user-select-none? Data on support for the user-select-none feature across the major browsers from caniuse.com.
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
html> head> meta charset="utf-8" /> title>user-selecttitle> style> body -ms-user-select: none; -moz-user-select: none; -webkit-user-select: none; user-select: none; > .enable -ms-user-select: all; -moz-user-select: all; -webkit-user-select: all; user-select: all; > style> head> body> p>Этот текст нельзя выделитьp> p> input type="text" value="Этот текст можно выделить" /> p> p class="enable"> Этот b>текстb> тоже можно выделить p> body> html>
Disable Text Selection Highlighting In HTML Using CSS
We can use user-select property in CSS to disable text selection highlighting in HTML pages.It is not a standard feature, but available in all modern browsers except IE 9 & before.
Using user-select:none: #
To disable the text selection in HTML we need to give user-select property value as none. Go through the below example to understand if further.
You can select this text.You cannot select this text,text selection is disabled
I have added disable-select class to the second div now we will add user-select css property
But we have to add browser specific prefix before the user-select option for safari,firefox and internet explorer or edge.
Chrome and opera supports non prefixed versions.
In Google Chrome: #
To disable text selection highlighting in Google Chrome browser using CSS just set -user-select CSS property to none.
And no prefix is required for Google Chrome and Opera Browsers.
In mozilla firefox: #
To disable text selection highlighting in mozilla firefox browser using CSS just set -moz-user-select CSS property to none.
And we need add -moz prefix before user-select property for mozilla firefox Browser.
In Safari: #
To disable text selection highlighting in Safari browser using CSS just set -webkit-user-select CSS property to none.
And we need add -webkit prefix before user-select property for Safari Browser.
In IOS Safari: #
To disable text selection highlighting in IOS Safari browser using CSS just set -webkit-touch-callout CSS property to none.
In Internet Explorer/Edge using: #
To disable text selection highlighting in Internet Explorer/Edge browser using CSS just set -ms-user-select CSS property to none.
And we need add -ms prefix before user-select property for Safari Browser.
What does user-select property will do? #
user-select css property controls whether a text in a HTML element can be selected or not. It is not a standard feature.
You can find more details about draft specification here
user-select property values: #
user-select value | description |
---|---|
none | user cannot select the text |
text | user can select the text |
all | user can select the text with one click |
auto | user-select value depend upon its parent user-select option |
contain | selection will be bound to particular element |
element | IE version of user-select contain. |
user-select none: #
As explained above, when we give user-select property value as none to an HTML element we cannot select the text inside the element including it’s children element.
text selection is disabledText selection is disabled in children element also
user-select text: #
When you give user-select property as text, user can select the text.
text selection is disabledYou can select metext selection is disabled
user-select all: #
When we give user-select property as all. Text inside the element is automatically selected on context click.
On click we can select the text
user-select auto: #
user-select auto behavior depends upon its parent element’s computed value of user-select.
- If the parent element’s computed value is none then it’s value is none. or if the computed value is all then it’s value is all. or if the value is text it’s value is text
- Otherwise the default behavior is text. that is user can select the text.
- On pseudo elements ::before and ::after the behavior is none
- And if the element is an editable element i.e., text or textarea the computed value is contain or element (In IE)
user-select contain: #
user-select contain is not supported in other browsers except internet explorer. In IE we have to give user-select option as element instead of contain.
So what exactly this user-select contain will do?
When you give user-select as contain or element selection will be bound to that element and cannot be extended.
Go through the below demo to understand it further.
user-select CSS example: #
We will see all user-select options in one place.
user-select:none
text selection is disabledText selection is disabled in children element alsouser-select:text
text selection is disabledYou can select metext selection is disableduser-select:all
On click we can select the textuser-select:auto
text selection is disabledas parent element is none cannot select texttext selection is disabled
text selection is enabledas parent element is text,can select texttext selection is enabledas parent element is text,can select textuser-select:contain
text selection is containThis is not selectedAnd the corresponding CSS values are
.text-selection-none < user-select: none; /* supported by Chrome and Opera */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; >.text-selection-text < user-select: text; /* supported by Chrome and Opera */ -webkit-user-select: text; /* Safari */ -khtml-user-select: text; /* Konqueror HTML */ -moz-user-select: text; /* Firefox */ -ms-user-select: text; >.text-selection-all < user-select: all; /* supported by Chrome and Opera */ -webkit-user-select: all; /* Safari */ -khtml-user-select: all; /* Konqueror HTML */ -moz-user-select: all; /* Firefox */ -ms-user-select: all; >.text-selection-auto < user-select: auto; /* supported by Chrome and Opera */ -webkit-user-select: auto; /* Safari */ -khtml-user-select: auto; /* Konqueror HTML */ -moz-user-select: auto; /* Firefox */ -ms-user-select: auto; >.text-selection-contain < user-select: contain; -webkit-user-select: contain; -khtml-user-select: contain; -moz-user-select: contain; -ms-user-select: element; /*Only IE supports user-select contain option*/ >div.before::after
As explained above user-select : contain option is only supported in IE, if you open the fiddle in IE, You can observe its behaviour the element selection cannot be extended beyond the element with class .text-selection-contain.
Don’t be a Stranger. Connect me at Social Networking Sites.
👋 Stay in the loop
Get a short & sweet tutorials delivered to your inbox every couple of days. No spam ever. Unsubscribe any time.
How to disable text selection with CSS
Fortunately there is an easy way in CSS to disable text selection on certain elements if you need to.
How to disable text selection in CSS
All modern browsers (with the exception of some versions of Safari) support the user-select property, which makes any HTML element unselectable. For example, if you wanted all buttons not be selectable, you could write the following:
button -webkit-user-select: none; user-select: none; >
We have to use -webkit-user-select since Safari still requires it. If you want to support Internet Explorer (which is becoming less and less common), you can also use -ms-user-select :
button -ms-user-select: none; -webkit-user-select: none; user-select: none; >
This single property will stop user selection. user-select also has other properties, in theory, but the support for these vary.
- user-select: none — no user select on the element.
- user-select: text — you can only select the text within the element
- user-select: all — tapping once will select the entire elements content.
- user-select: auto — the default, lets you select everything like normal.
The support for each of these varies, but you can find a full, up to date list of support for user-select on caniuse.
Top comments (8)
You shouldn’t disable text selection even in the scenarios you mentioned:
- On HTML elements that trigger events. You most probably should be using the button element which doesn’t let you to select text on it, but also if they have event handlers, you can just preventDefault and problem solved.
- On drag and drop interfaces. Again, ideally you should preventDefault when handling the drag event.
- On many other . For example . we usually don’t want the button that makes text bold to be selectable. As a button , you can’t select the text on it.
Here’s a demo of a button which doesn’t let you select text on it unless you actually trying to select it (either from outside in PC, or long pressing on mobile), yet when you click on it, it works as expected:
The main reason you should avoid this is that you’re making UX worse by not meeting the user expectations. As soon as you make your WebApp behave differently to what users expect, you’re just being annoying for them.
3 likes Like Comment button
Yes ideally use a button, but in practice on the web, sometimes, for one reason or another, events are attached to non-buttons. Anyways, buttons are selectable on drag, which kind of relates to the other points — if you are dragging an HTML element through other HTML elements, lots of browsers handle this differently. On a project I worked on a year or two ago, I found Safari, for example, causing all sorts of weird text selection behaviour — where dragging an HTML element past others led to background selection, amongst other things.
I think I’m clear in saying disabling text selection should not be the default solution, but it is indeed a solution to some UI problems and a useful one at that.
2 likes Like Comment button
Yup, was only adding to the point that we shouldn’t default to just mess with user expectation by disabling selection, and instead just use that if is absolutely necessary. Something like:
- UX asks to add a button behavior to something that isn’t a button.
- You push back on that and propose to use a button instead, and explain the reasons for that.
- Maybe that’s it, everything goes great, or maybe.
- Product and UX push further into it.
- F*** it, just add the ugly CSS.
Either way, don’t take my initial comment as me saying «this is useless», because it isn’t and your post is great (you even detailed the behavior for every possible value), it was more like me saying «we should definitely avoid this, just do it if you actually can’t solve it with a cleaner approach». Folks googling «how to disable selection» might try to do this by default, when is actually the fallback (sorta like the XY problem).
1 like Like Comment button