6167

For anchors that act like buttons (for example, the buttons on the sidebar of this Stack Overflow page titled Questions, Tags, and Users) or tabs, is there a CSS standard way to disable the highlighting effect if the user accidentally selects the text?

I realize that this could be done with JavaScript and a little googling yielded the Mozilla-only -moz-user-select option.

Is there a standard-compliant way to accomplish this with CSS, and if not, what is the "best practice" approach?

Improve this question
8
  • 12
    can elements within the element witch has highlighting disabled, have highlighting enabled with in css in the style or class attribute? or in other words, are there other values for -webkit-user-select ect. other than just none? Commented Mar 14, 2011 at 21:18
  • 12
    Related: stackoverflow.com/questions/16600479/… = how to allow only some of the child elements to be selected Commented May 17, 2013 at 2:36
  • 17
    There a bug in some browsers where doing "Select All" (CTRL+A and CMD+A) still selects things. This can be fought with a transparent selection color: ::selection { background: transparent; } ::-moz-selection { background: transparent; } Commented Dec 12, 2014 at 1:03
  • 4
    In year 2017, it is better way to use postcss and autoprefixer and set browser version, then postcss make everything cool. Commented Dec 6, 2017 at 11:47
  • 2
    The user interface changed. In 2019, all three mentioned items are now in a hamburger menu in the upper left. "Tags" and "Users" are in there, and "Questions" is now called "Stack Overflow" (with an icon in front). Commented Nov 24, 2019 at 12:23

46 Answers 46

Reset to default
1
2
20

I have learned from the CSS-Tricks website.

user-select: none;

And this also:

::selection {
    background-color: transparent;
}

::moz-selection {
    background-color: transparent;
}

::webkit-selection {
    background-color: transparent;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It only makes it invisible
19

If you want to disable selection and highlighting for the whole page with CSS, you can easily apply it to all elements:

* {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
}
Improve this answer

Comments

15

Have you tried this?

.disableSelect{
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;

    pointer-events:none;
}
Improve this answer

2 Comments

This is required to disable text input selection. user-select: none must be at div class and pointer-events: none at input class
pointer-events was the secret I needed, to stop a not-technically-background image from being selected
11

You can use a *-user-select property as below for that...

p {
    -webkit-user-select: none;  /* Chrome all and Safari all */
    -moz-user-select: none;     /* Firefox all */
    -ms-user-select: none;      /* Internet Explorer 10 and later */
    user-select: none;          /* Likely future */
}

Link for the Detailed Description

Improve this answer

Comments

10

Try to use this one:

::selection {
    background: transparent;
}

And if you wish to specify not select inside a specific element, just put the element class or id before the selection rule, such as:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}
Improve this answer

1 Comment

That does not disable select at all...It only makes it invisible
9

Add a class to your CSS that defines you cannot select or highlight an element. I have an example:

<style> 
    .no_highlighting{
        user-select: none;
    }

    .anchor_without_decoration:hover{
        text-decoration-style: none;
    }
</style>

<a href="#" class="anchor_without_decoration no_highlighting">Anchor text</a>
Improve this answer

Comments

8

With CSS-

div {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -o-user-select: none;

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}
<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

Improve this answer

Comments

8

This highlighting effect is due to the action called hover (onMouseHover).

When you will hover on any tab its color will be changed.

Just say for example,

HTML code

<div class="menu">
    <ul class="effect">
        <li>Questions</li>
        <li>JOBS</li>
        <li>Users</li>
    </ul>
</div>

CSS code

.effect:hover {
    color: none;
}

You can use any color if you want to get it highlighted. Else you can use none.

Improve this answer

1 Comment

No, what you are talking about is hovering, which means "when the mouse is over the text". It is different from "selecting the text". By default there is no color when hovering.
6

I see many detailed answers but I believe that writing just this line of code should be enough for the required task:

*{
    -webkit-user-select: none;
 }
Improve this answer

Comments

5

Even better, you can disable text selection.

If you like Sass (SCSS), and you don't want to use Compass you can do this:

styles.scss

@mixin user-select($select) {
    -webkit-touch-callout:#{$select};
    @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
        #{$pre + user-select}: #{$select};
    }
    #{user-select}: #{$select};
}

.no-select {
    @include user-select(none);
}
Improve this answer

Comments

4

I combined the various browser CSS select attributes with the unselectable tag required for Internet Explorer < 9.

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer 10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>
Improve this answer

Comments

2

Tailwind CSS

In tailwind you can utilize the class select-none.

CSS

This is the equivalent variant in CSS when utilizing select-none.

.select-none {
    -webkit-user-select: none;
    user-select: none;
}
Improve this answer

Comments

1 
::selection {background: transparent; color: transparent;}

::-moz-selection {background: transparent; color: transparent;}
Improve this answer

3 Comments

Can you explain further what you mean by this? How does this improve the other highly upvoted answers?
This does not disable the text-selection, all it does is hide it for the user. The computer itself still knows it is being selected, the background-color is just transparent. But if you press ctr (cmd on mac) + A and then copy you can paste the text somewhere else.
An explanation would be in order.
0

Maybe you can use this solution through :before:

nav li {
    display: inline-block;
    position: relative;
}

nav li a {
    display: inline-block;
    padding: 10px 20px;
}

nav li a:hover {
    color: red;
}

nav li.disabled:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
<nav>
    <ul>
    <li><a href="#">Link</a></li>
    <li class="disabled"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

Improve this answer

1 Comment

This is not an answer, you can still select the text.
0

You may also want to prevent the context menu appearing when touching elements like buttons that have their selection prevented. To do that, add this code to the entire page, or just those button elements:

$("body").on("contextmenu",function(e){
    return false;
});
Improve this answer

Comments

-2

This may work

    ::selection {
        color: none;
        background: none;
    }
    /* For Mozilla Firefox */
    ::-moz-selection {
        color: none;
        background: none;
    }
Improve this answer

1 Comment

When adding answers to ten year old questions with forty four other answers the bar is higher. It is useful to address in your answer what new aspect of the question your answer addresses and how the passage of time an emergence of new technologies has impacted the answer. The answer should also explain how and what the code does.
1
2