Home > Web Front-end > CSS Tutorial > Code example to disable selected text through CSS rules

Code example to disable selected text through CSS rules

黄舟
Release: 2017-04-18 09:44:17
Original
1654 people have browsed it

Prohibiting selected text is still necessary in some scenarios, such as if you don’t want others to copy your articles. At this time we can solve this problem by using CSS+JS. In addition, it should be pointed out here that user-select is not yet an official W3C standard, and each browser provides support in the form of private attributes.

Syntax

Formal syntax: none | text | all | element
Copy after login

The code is as follows:

(-prefix-)user-select: none;
(-prefix-)user-select: text;
(-prefix-)user-select: all;
(-prefix-)user-select: element;
Copy after login

The code is as follows:

.row-of-icons {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */</p> <p> /* No support for these yet,use at own risk */
-o-user-select: none;
user-select: none;
}
Copy after login

IE Compatibility

Currently, the -ms-user-select rule can be used in browsers of IE 10 and above, but in earlier versions of IE, we can only prohibit selected text through javascript:

The code is as follows:

$(el).attr(&#39;unselectable&#39;,&#39;on&#39;)
.css({&#39;-moz-user-select&#39;:&#39;-moz-none&#39;,
&#39;-moz-user-select&#39;:&#39;none&#39;,
&#39;-o-user-select&#39;:&#39;none&#39;,
&#39;-khtml-user-select&#39;:&#39;none&#39;, /* you could also put this in a class */
&#39;-webkit-user-select&#39;:&#39;none&#39;,/* and add the CSS class here instead */
&#39;-ms-user-select&#39;:&#39;none&#39;,
&#39;user-select&#39;:&#39;none&#39;
}).bind(&#39;selectstart&#39;, function(){
return false;
});
Copy after login


The above is the detailed content of Code example to disable selected text through CSS rules. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template