How to disable selected text in css

In CSS, you can use the user-select attribute to prohibit text selection. You only need to add the "user-select:none;" style to the text element. The user-select attribute can set or retrieve whether the user is allowed to select text. When the value is "none", it means that the text cannot be selected.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In CSS, you can use the user-select attribute to prohibit text selection.

The user-select attribute sets or retrieves whether the user is allowed to select text

Syntax:

user-select：none |text| all | element

Attribute value:

• 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 contextually click on a child element, the selected part will be the highest ancestor element tracing back from that child element.

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

Code that prohibits text selection

PC side:

.not-select{
    -moz-user-select:none; /*火狐*/
    -webkit-user-select:none; /*webkit浏览器*/
    -ms-user-select:none; /*IE10*/
    -khtml-user-select:none; /*早期浏览器*/
    user-select:none;
}

Mobile:

.no-touch {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Supplement: js method:

ontouchstart="return false;"

Add this on the dom that needs to be banned Code snippet, the support of the two methods for Android and IOS has not been tested separately. Using both at the same time can prohibit Android and IOS.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to disable selected text in css. For more information, please follow other related articles on the PHP Chinese website!