Code example to disable selected text through CSS rules-CSS Tutorial-php.cn

Code example to disable selected text through CSS rules

黄舟

Release： 2017-04-18 09:44:17

Original

1612 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!