Blocking user selection on css

Hey guys, on this tutorial we're going to see how to block a user selection, so, preventing from coping the text.

This is pretty simple and where going to use the `user-select` property. For this example we're going to use a simple paragraph with a lorem ipsum.

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam est sem, sodales vitae maximus sit amet, ornare nec ligula. Sed iaculis leo velit, in lobortis libero laoreet faucibus. Aliquam imperdiet sem eget quam dignissim, ut rutrum elit consectetur. Nulla tristique quam et vulputate sagittis. In luctus non nibh at volutpat. Vivamus eleifend pharetra dolor at placerat. Quisque id libero ut sem mollis commodo quis vitae nibh. In tincidunt pharetra venenatis. Nulla facilisi. Phasellus rutrum laoreet lacus, at mattis nunc volutpat et. Nulla facilisi. Phasellus in dui id leo facilisis vehicula. Praesent eleifend augue lectus, id aliquam felis consectetur sit amet. Nullam maximus convallis tortor, non dapibus leo ullamcorper et. Nulla in nunc eleifend, posuere diam vel, volutpat metus. Nullam at mollis tortor.
</p>

So, on the css where going to put the property, it has the following syntax user-select: auto | none | text | all;

-webkit-user-select:none; /* Safari 3.1+ */
-moz-user-select: none;/* Firefox 2+ */
-ms-user-select: none;/* IE 10+ */
user-select: none; /* Standard syntax */

That's all folks!

Blog

Blocking user selection on css

Rodrigo Cordeiro

Join Our Newsletter. No Spam, Only the good stuff.

Related