CSS3 User-SELECT Attribute Set whether the text content can be selected

CSS3 provides a user-select attribute to set or retrieve whether the user is allowed to select text.

Syntax

Value

Instructions, compatibility and precautions p>

Simple example

<style> 

.testUserSelect{

　　padding: 10px;

　　-webkit-user-select: none;

　　-moz-user-select: none;

　　-o-user-select: none;

　　user-select: none;

　　background: #eeeeee;

}

style>



<div  class="testUserSelect" onselectstart="return false;" unselectable="on"> Choose me and try, and if you choose me, I will let you hey. div> span>

“The world is so big, but I still met you. The world is so small, but I still lost you.”

user-select:none | text | all | element.

Default value:text.

Applicability: All elements except replacement elements.

Inheritance: None.

Animation:No.

Calculated value: Specify the value.

none: The text cannot be selected.

text: You can select text (default).

all: can be selected when all content as a whole. If you double-click or click on a child element in the context, then the selected part will be the highest ancestor element that backs up the child element.

element: You can select text, but the selection range is constrained by the boundary of the element.

This attribute is used to set or retrieve whether the user is allowed to select text.

1.IE6~9 do not support this attribute, but support the use of the label attribute [onselectstart=”return false;”] to achieve [user-select: none;] the effect.

2. Safari and Chrome also support this tag attribute.

3. Opera still does not support this attribute until 12.5, but like IE6~9, it also supports the use of private label attributes [unselectable=”on”] to achieve 【User-select: none;】 The effect.

4. Another value of unselectable is off (default value).

5. Except Chrome and Safari, in other browsers, if the text is set to [-ms-user-select: none;], the user will Unable to start selecting text in this text block. However, if the user starts to select text in other areas of the page, the user can still continue to select the text in the area where the text is set to [-ms-user-select: none;], that is, the text selection is continuous, this attribute In addition to Chrome and Safari, other browsers do not have the feature of instantaneously interrupting continuous text selection.

6. The script feature corresponding to this attribute is userSelect.

<style>

.testUserSelect{

　　padding: 10px;

　　-webkit-user-select: none;

　　-moz-user-select: none;

　　-o-user-select: none;

　　user-select: none;

　　background: #eeeeee;

}

style>



<div  class="testUserSelect" onselectstart="return false;" unselectable="on"> Choose me to try, and if you choose me, I will let you hahaha. div> span>

Choose me to try, and if you choose me, you will be hehehe.