How to disable text selection in css

The way to prohibit text selection in css is to add the user-select attribute and set the attribute value to none, which means that the text cannot be selected. The specific code is such as [user-select:none;].

The operating environment of this article: windows10 system, css 3, thinkpad t480 computer.

In a web browser, if we double-click on text, the text will be selected or highlighted. So what if we wanted to ban this behavior? It's actually very simple, just use the following properties.

The user-select attribute specifies whether the text of the element can be selected.

In a web browser, if you double-click on text, the text will be selected or highlighted. This property is used to prevent this behavior.

Syntax:

user-select: auto|none|text|all;

Attribute value:

• auto Default. Text can be selected if the browser allows it.

• #none Prevent text selection.

• #text Text can be selected by the user.​

• #all Click to select text instead of double-clicking.

The implementation code is as follows:

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 side:

.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;
}

Related video sharing:css video tutorial

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