How to use user-select? What is the default value?

user-select is used to set whether the user can select text. Its default value is text, which means that text can be selected. It has three other attribute values: none cannot be selected, all content as a whole can be selected, and element can be selected but is constrained by element boundaries

user-select The attribute is a new attribute in CSS3 and is used to set whether the user can select text.

Syntax

user-select:none | text | all | element

Default value: text

Applicable scope: all elements except replacement elements

Take Value description

none: Text cannot be selected

text: Text can be selected

all: All content can be selected as a whole. If you double-click or contextually click on a child element, the selected part will be the highest ancestor element tracing back from that child element.

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

Explanation

1. IE6-9 does not support this attribute, but Supports using the label attribute onselectstart=”return false;” to achieve the effect of user-select:none; Safari and Chrome also support this label attribute;

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

3. In addition to Chrome and *Safari, In other browsers, if text is set to -ms-user-select:none;, the user will not be able to start selecting text within that text block. However, if the user starts selecting text in other areas 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

Example:

css code:

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

html code:

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

The above is the detailed content of How to use user-select? What is the default value?. For more information, please follow other related articles on the PHP Chinese website!