Detailed explanation of the usage of user-select in css3

The user-select attribute is a new attribute in css3, which is used to set whether the user can select text. Can be used for all elements except replacement elements. The following is a description of the main usage and precautions of user-select. For more information, please refer to the following css3 document description.

(1) Syntax

user-select:none | text | all | element

Default value ：text

Applicable scope:All elements except replacement elements

(2) Value description

none:Text cannot be selected

text:Text can be selected

all:When all content is taken as a whole can be selected. If you double-click or click on a child element in the context, the selected part will be the highest ancestor element tracing back from the child element.

Element:Text can be selected, but the selection range is constrained by the element boundary

(3) Browser support

The following figure lists the support level of each browser when the value is none|text|all; when the value is element, most browsers do not support it, so it is not listed.

(4) Description

1.IE6-9 This attribute is not supported, but its use is supported Tag attribute onselectstart="return false;" to achieve the effect of user-select:none ; Safari and Chrome also support this tag Attribute;

2. This attribute is not supported until Opera12.5, but like IE6-9, it also supports the use of private label attributes unselectable ="on" to achieve the effect of user-select:none; the other value of unselectable is off;

3 .In browsers except Chrome and Safari, if the text is set to -ms-user-select:none;, the user You will not be able to start selecting text within this text block. However, if the user starts selecting text in another area of ​​the page, the user can still continue to select the area text by setting the text to -ms-user-select:none; ;

##4. The corresponding script feature is

userSelect

##(5) Example

css code:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html code:

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

                                                  ​ ​ ​ ​

Detailed explanation of the usage of user-select in css3

Reference link: http://www.php.cn/

(1) Syntax

user-select:

none | text | all | element

Default value:

text

Applicable scope:

All elements except replacement elements

(2) Value description

none:

Text cannot be selected

text:

Text can be selected

all:

Can be selected when all content is taken as a whole. If you double-click or click on a child element in the context, the selected part will be the highest ancestor element tracing back from the child element.

Element:

Text can be selected, but the selection range is constrained by the element boundary

(3) Browser support

##(4) Description

1.

is not supported This attribute, but supports the use of label attributes

onselectstart="return false;" to achieve the effect of user-select:none ; Safari and ChromeThis tag attribute is also supported;

2. This attribute is still not supported until Opera12.5, but like IE6-9, it also supports the use of private label attributes unselectable="on" To achieve the effect of user-select:none; the other value of unselectable is off;

3. Except In browsers other than Chrome and Safari, if the text is set to -ms-user-select:none;, the user will not be able to Start selecting text within the block. However, if the user starts selecting text in another area of ​​the page, the user can still continue to select the area text by setting the text to -ms-user-select:none; ;

##4. The corresponding script feature is

userSelect

##(5) Example

css code:

.box{
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html code:

<p class="box" onselectstart="return false;" unselectable="on">
    这是测试数据
</p>

For more detailed explanations on the usage of user-select in css3, please pay attention to the PHP Chinese website for related articles!