How to disable HTML selection blue background?

Question

That might not be a big deal for someones but i'm struggling with a little issue.

When i click several times on elements in my html, there are some blue selection rectangles that showing up.

I'm trying to find a way to get rid of that.

In my scss, i've tried

input, textarea, select, a, button { @include user-select(none) ; }

But i still get this issue mostly on text element.

So my question is : How to disable HTML blue selection when we make clicks on the links.

Any help will be appreciated.

Thanks.

Possible duplicate of [How do I disable text selection with CSS or JavaScript?](http://stackoverflow.com/questions/3779534/how-do-i-disable-text-selection-with-css-or-javascript) — Manwal, Dec 16 '16 at 07:51
If you can add screenshot of issue that will be very helpful to solve this. — pradeep1991singh, Dec 16 '16 at 08:10

score 6 · Answer 1 · answered Dec 16 '16 at 07:57

6

Try this:

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

answered Dec 16 '16 at 07:57

Not sure the OP meant this, but its just what I was looking for. Don't know how many browsers it works on, but it seems good to go on Chrome and FF. browsers a few years back. – Randy Apr 12 '19 at 01:06

score 1 · Answer 2 · answered Dec 16 '16 at 08:41

1

If you are talking about outlines so you can try below code

*{
outline-style: none;
}

or

*{
outline: none;
}

If you are talking about selection so use this code

 user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;

answered Dec 16 '16 at 08:41

Santosh Khalse

Something missing there? Drop that into a style block and it doesn't do anything, but does mess up all CSS after it. Does it need "::" in front of each? Should each property be {bracketed} ? – Randy Apr 12 '19 at 01:13

2 Answers2