How to make certain text not selectable with CSS

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?

score 718 · Accepted Answer · edited Sep 18 '17 at 21:23

718

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>

edited Sep 18 '17 at 21:23

Karmic Coder

17,569
6
32
42

answered Aug 01 '11 at 15:03

tw16

29,215
7
63
64

9

And does the `unselectable` attribute work in all browsers? – Fabián Aug 14 '13 at 02:08
it does not work for mobile browsers – Neville Nazerane Feb 25 '14 at 09:24
2

@Fabián no i tested and it does not work on chrome – Neville Nazerane Feb 25 '14 at 09:25
4

Nice answer! Thanks. And for good measure, I like to add: `cursor: default;` – Stan Smulders Dec 07 '16 at 09:10
32

As of 2016, as simple `user-select` is enough now. – Konstantin Schubert Dec 23 '16 at 13:52
2

@KonstantinSchubert not on Firefox 49.0.2 (released October 2016), which still requires `-moz-user-select`. – Jamie Birch Jul 27 '17 at 10:45
It works on Chrome. thanks. – Shwe Apr 26 '19 at 13:35
1

It looks like Safari still requires `-webkit-user-select: none;` Kind of annoying... – PugsAreCute Jan 31 '21 at 20:03

score 35 · Answer 2 · answered Aug 01 '11 at 14:46

35

Use a simple background image for the textarea suffice.

Or

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

answered Aug 01 '11 at 14:46

Erre Efe

15,387
10
45
77

How to make certain text not selectable with CSS

2 Answers2

Linked