Making Text Unselectable

The user-select property changes the selectability of an element. By default, text inside an element is selectable. However, there are times when we want to disable this selection option to eliminate confusion in the interface. In such case, we can set the value to none.

Unselectable.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's CSS</title>
  </head>
  <body>
  	<p style="user-select:auto">default selectability</p>
  	<p style="user-select:all">select all</p>
  	<p style="user-select:text">select text</p>
  	<p style="user-select:none">unselectable</p>
  </body>
</html>

Output

default selectability

select all

select text

unselectable