How to make certain text not selectable with CSS

Css

Css Problem Overview


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?

Css Solutions


Solution 1 - Css

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>

Solution 2 - Css

Use a simple background image for the textarea suffice.

Or

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionjmasterxView Question on Stackoverflow
Solution 1 - Csstw16View Answer on Stackoverflow
Solution 2 - CssErre EfeView Answer on Stackoverflow