A detailed explanation of the usage of user-select in CSS3

A detailed explanation of the usage of user-select in CSS3

The User-select property is a new property of CSS3 that sets 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 considerations of user-select, and more information can be found in the CSS3 documentation below.

(1) syntax

user-select:None | Text | All | Element

Default value:text

Scope of application: all elements except the replacement element

(2) Value description

None: text cannot be selected

Text : You can select texts

All : can be selected when all content is 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 that is backtracking upward with that child element.

element: You can select text, but the selection is constrained by the bounds of the element

(3) Browser support situation

To list the degree of support for each browser in the case of a value of None|text|all, when the value is element, most browsers do not support it and are not listed.

(4) Description

1.ie6-9 does not support this property, but it supports the use of the label property onselectstart= "return false;" To achieve the user-select:none effect;Safari and Chrome also support this tag property;

2. Until Opera12.5 still does not support this property, but like ie6-9 , it also supports the use of private label properties unselectable= "on" to achieve User-select: the effect of none; another value ofunselectable is off;

3. In other browsers, except chrome</font> and safari</font>, if the text is set to -ms-user-select:none; The user will not be able to start selecting text in that block of text. However, if the user starts selecting text in other areas of the page, the user can still choose to set the text to -ms-user-select:none; the regional text;

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" >    this is the test data </p>

A detailed explanation of the usage of user-select in CSS3

The User-select property is a new property of CSS3 that sets 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 considerations of user-select, and more information can be found in the CSS3 documentation below.

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

(1) syntax

user-select:None | Text | All | Element

Default value:text

Scope of application: all elements except the replacement element

(2) Value description

None: text cannot be selected

Text : You can select texts

All : can be selected when all content is 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 that is backtracking upward with that child element.

element: You can select text, but the selection is constrained by the bounds of the element

(3) Browser support situation

To list the degree of support for each browser in the case of a value of None|text|all, when the value is element, most browsers do not support it and are not listed.

(4) Description

1.ie6-9 does not support this property, but it supports the use of the label property onselectstart= "return false;" To achieve the user-select:none effect;Safari and Chrome also support this tag property;

2. Until Opera12.5 still does not support this property, but like ie6-9 , it also supports the use of private label properties unselectable= "on" to achieve User-select: the effect of none; another value ofunselectable is off;

3. In other browsers, except chrome</font> and safari</font>, if the text is set to -ms-user-select:none; The user will not be able to start selecting text in that block of text. However, if the user starts selecting text in other areas of the page, the user can still choose to set the text to -ms-user-select:none; the regional text;

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" >    this is the test data </p>