Home  >  Article  >  Web Front-end  >  How to set css to prevent text from being selected

How to set css to prevent text from being selected

王林
王林Original
2020-11-16 13:42:562120browse

How to set text that cannot be selected in css: You can use the user-select attribute to set it, such as [user-select:none]. The user-select attribute is new in CSS3 and is used to control the selectivity of content.

How to set css to prevent text from being selected

Attribute introduction:

user-select is a new function in the css3 UI specification, used to control the selectivity of content .

(Learning video sharing: css video tutorial)

Code implementation:

/*设置文字不能被选中     以下为css样式*/
-webkit-user-select:none;
   -moz-user-select:none;
   -ms-user-select:none;
   user-select:none;

Attribute value:

  • auto - the default value, the user can select the content in the element

  • none - the user cannot select any content in the element

  • text - the user can select the text in the element

  • element - the text is optional, but only within the bounds of the element (only supported by IE and FF) all - within the editor , if a double-click/contextual click occurs on a child element, that element's highest-level ancestor element will be selected.

  • -moz-none——firefox private, the text of elements and sub-elements will not be selectable, except the text in the input input box (under IE browser, through onselectstart="javascript: return false;" event to implement this function)

Related recommendations: CSS tutorial

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn