Moz user select css

user-select

The user-select 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.

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. You can also use this to enforce that an entire element gets selection:

Here’s some demos of those: See the Pen user-select demo by Chris Coyier (@chriscoyier) on CodePen. There was no spec for this property for quite a while, but now is covered under CSS Basic User Interface Module Level 4. The default value is auto , which makes selection happen normally as you expect. “Normally” is a bit complicated. It’s worth quoting from the spec here:

• On the ::before and ::after pseudo elements, the computed value is none
• If the element is an editable element, the computed value is contain
• Otherwise, if the computed value of user-select on the parent of this element is all , the computed value is all
• Otherwise, if the computed value of user-select on the parent of this element is none , the computed value is none
• Otherwise, the computed value is text

In other words, it intelligently cascades and resets to a sensical state. It looks like maybe this feature could be used to make pseudo elements selectable, but no final word yet.

Firefox supports -moz-none , which is just like none except that it means sub-elements can override the cascade and become selectable again with -moz-user-select: text; As of Firefox 21, none behaves like -moz-none .

Internet Explorer also supports a so-far-proprietary value, element , in which you can select text inside the element but the selection will stop at the bounds of that element.

This is specifically for -*-user-select: none;

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

Источник

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> 

Источник

user-select

The user-select CSS property controls whether the user can select text. This doesn’t have any effect on content loaded as part of a browser’s user interface (its chrome), except in textboxes.

Try it

Syntax

/* 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: revert; user-select: revert-layer; user-select: unset; 

Note: user-select is not an inherited property, though the initial auto value makes it behave like it is inherited most of the time. WebKit/Chromium-based browsers do implement the property as inherited, which violates the behavior described in the spec, and this will bring some issues. Until now, Chromium has chosen to fix the issues to make the final behavior meet the specifications.

Values

The text of the element and its sub-elements is not selectable. Note that the Selection object can contain these elements.

The used value of auto is determined as follows:

• On the ::before and ::after pseudo elements, the used value is none
• If the element is an editable element, the used value is contain
• Otherwise, if the used value of user-select on the parent of this element is all , the used value is all
• Otherwise, if the used value of user-select on the parent of this element is none , the used value is none
• Otherwise, the used value is text

The text can be selected by the user.

The content of the element shall be selected atomically: If a selection would contain part of the element, then the selection must contain the entire element including all its descendants. If a double-click or context-click occurred in sub-elements, the highest ancestor with this value will be selected.

Enables selection to start within the element; however, the selection will be contained by the bounds of that element.

Note: CSS UI 4 renamed the element value to contain .

Formal definition

Formal syntax

Источник

CSS user-select Property

The user-select property specifies whether or not the user can select text.

The default value is «auto» which is determined as follows:

• On the ::before and ::after pseudo elements, the computed value is «none»
• If the element is an editable element, the computed value is «contain»,
• If the computed value of user-select on the parent of this element is «all», the computed value is «all».
• If the computed value of user-select on the parent of this element is «none», the computed value is «none»,
• Otherwise, the computed value is «text».

For maximum browser compatibility extensions such as -webkit- for Safari, Google Chrome, and Opera (newer versions), -moz- for Firefox are used with this property.

Initial Value	auto
Applies to	All elements, though some values have no effect on non-inline elements.
Inherited	No.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.userSelect = «text»;

Syntax

user-select: auto | none | text | all | contain | initial | inherit;

Example of the user-select property with the «auto» value:

html> html> head> title>Title of the document title> style> div < -webkit-user-select: auto;/* Safari 3.1+ */ -moz-user-select: auto;/* Firefox 2+ */ user-select: auto;/* Standard syntax */ > style> head> body> h2>User-select property example h2> div>Lorem ipsum is simply dummy text. div> body> html>

In the given example, the text cannot be selected.

Example of the user-select property with the «none» value:

html> html> head> title>Title of the document title> style> div < -webkit-user-select: none;/* Safari 3.1+ */ -moz-user-select: none;/* Firefox 2+ */ user-select: none;/* Standard syntax */ > style> head> body> h2>User-select property example h2> div>Lorem ipsum is simply dummy text. div> body> html>

The text is selected by one click instead of double-click.

Example of the user-select property with the «all» value:

html> html> head> title>Title of the document title> style> div < -webkit-user-select: all;/* Safari 3.1+ */ -moz-user-select: all;/* Firefox 2+ */ user-select: all;/* Standard syntax */ > style> head> body> h2>User-select property example h2> div>Lorem ipsum is simply dummy text. div> body> html>

In the following example, you can select any part of the text you want.

Example of the user-select property with the «text» value:

html> html> head> title>Title of the document title> style> div < -webkit-user-select: text;/* Safari 3.1+ */ -moz-user-select: text;/* Firefox 2+ */ user-select: text;/* Standard syntax */ > style> head> body> h2>User-select property example h2> div>Lorem ipsum is simply dummy text. div> body> html>

Values

Value	Description	Play it
auto	Text can be selected if the browser allows it. This is the default value of this property.	Play it »
none	Text is not selected.	Play it »
text	Text is selected by the user.	Play it »
all	Text is selected by one click.	Play it »
contain	When the element is an editable.	Play it »
initial	Sets the property to its default value.	Play it »
inherit	Inherits the property from its parent element.

Browser support

Practice Your Knowledge

Which statement is correct about CSS user-select property?

If the element is an editable element, the computed value is «cover». If the computed value of user-select on the parent of this element is «none», the computed value is «auto». On the ::before and ::after pseudo elements, the computed value is «text». If the computed value of user-select on the parent of this element is «all», the computed value is «all».

Источник