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


Tags: css

Problem :

This question already has an answer here:

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?



Solution :

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

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

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

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

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

    CSS Howto..

    CSS: How do you keep this Div to the right of a float?

    How to set a background image in css?

    How to create border corner spacing in CSS

    How to change CSS li tag in Bootstrap3 navigation when in and out or responsive view?

    “Best fit” font size - how do I measure a sentence width?

    How to make hover css menu fade in and out?

    How to get a navbar to display text depending on button clicked

    CSS or jQuery on rails / How to “fill frame” with an image?

    How to allow user to switch back to standard view from a mobile device (CSS) [duplicate]

    How to stop divs moving under each other when zooming out

    How can I put a inside of an ? [duplicate]

    Text is too close to scroller. How to create a little bit space between scroller and text?

    In CSS/SVG, how to rotate each character of a word?

    How to vertically align the baseline of text to a set point in HTML/CSS

    meteorjs how to import a wrapbootstrap theme

    How do I get a zooming effect on an image when a user hovers over it? [closed]

    How to create inheritance with LESS?

    How does *, *:after, *:before work?

    Dropdown container not showing right padding

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    how to use CSS positioning in 100% width layout

    How to use Chrome Inspector to show the popup css for a jquery plugin

    How can I set the correct position of the text in CSS?

    How to ensure each DIV appears on it's own without overlapping

    How do I align these boxes using bootstrap?

    How to check “IF any one or all buttons are clicked” in jquery

    how to apply css on only one class?

    How to force enter key to make a line break inside iframe editor

    using a simple list item
  • what am I doing wrong. background color doesnt show up
  • How to convert this CSS animation to use GPU level, instead of updating layer tree