How to make certain text not selectable with CSS [duplicate]

Question

The header for my page has some centered text, but I do not want the user to be able to select it. Is there a way to do this with CSS?

Akene

Answer 1

The CSS below stops users from being able to select text.

-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */

To target IE9 downwards the html attribute unselectable must be used instead:

<p unselectable="on">Test Text</p>

Neckband

And does the unselectable attribute work in all browsers? – Grimaud

it does not work for mobile browsers – Sopor

@Fabián no i tested and it does not work on chrome – Sopor

Nice answer! Thanks. And for good measure, I like to add: cursor: default; – Coyle

As of 2016, as simple user-select is enough now. – Gabon

@KonstantinSchubert not on Firefox 49.0.2 (released October 2016), which still requires -moz-user-select. – Baudelaire

It works on Chrome. thanks. – Weevil

It looks like Safari still requires -webkit-user-select: none; Kind of annoying... – Halcomb

Answer 2

Use a simple background image for the textarea suffice.

Or

<div onselectstart="return false">your text</div>

Noblewoman