Disable Blue Highlight when Touch/Press object with Cursor:Pointer

Question

There is a blue highlight that appears whenever a Div that has the cursor:pointer property applied is touched in Chrome. How can we get rid of it?

I have tried the following:

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

But they do not affect the blue highlighting on press of a cursor.

score 192 · Answer 1 · answered Sep 06 '14 at 20:55

192

-webkit-tap-highlight-color:  rgba(255, 255, 255, 0);

Takes care of the problem, as it sets the highlight color transparent.

Source: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/

answered Sep 06 '14 at 20:55

Ulad Kasach

11,558
11
61
87

40

`-webkit-tap-highlight-color: transparent;` is also fine. – Neil Morgan May 20 '20 at 10:34

Oboo Cheng · Answer 2 · 2016-01-09T02:32:59.527

122

As far as I have known,Vlad K's answer could cause problems in some android devices.Better solution:

-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;

edited Jan 09 '16 at 02:32

answered Apr 30 '15 at 07:33

Oboo Cheng

4,250
3
24
29

1

Please clarify which answer alternate of "answer above" – Nima Derakhshanjan Apr 30 '15 at 07:38
1

why have you used `rgba(0,0,0,0)` instead of `rgba(255,255,255,0)` – Gaurav Aggarwal May 10 '16 at 09:10
1

@GauravAggarwal The **alpha** space makes sense ,so there is no difference between rgba(0,0,0,0) and rgba(255,255,255,0).This is just a case i think.Does rgba(255,255,255,0) acts weird? – Oboo Cheng May 12 '16 at 03:06
@GauravAggarwal anything wrong? some early versions of webkit-based browsers doesn't support the **rgba** color declaration.transparent keyword based on **opacity** property, which been supported well.for browsers support rgba,**rgba(x,y,z,0)** are all transparent. [rgba support info here](https://css-tricks.com/rgba-browser-support/) – Oboo Cheng May 13 '16 at 03:46
4

If you're going to override it with transparent anyway, why have an rgba declaration at all? Are there WebKit versions that somehow don't support the transparent keyword on this property? – BoltClock May 13 '16 at 05:15
5

@BoltClock .I really can't find 'transparent' keyword in [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color) so i think it's not standard.Before I answer this question I have read [this article](http://phonegap-tips.com/articles/essential-phonegap-css-webkit-tap-highlight-color.html),**Christian Cook **'s comment advice to add this because he cames into problem with some sumsung device.I think it's a bug of specific device. – Oboo Cheng May 13 '16 at 09:55
why not just `#0000` – punund Sep 06 '21 at 21:40
@punund have a check of caniuse info https://caniuse.com/css-rrggbbaa – Oboo Cheng Sep 07 '21 at 01:45
@ObooCheng it says it's not supported only by Chrome older than 62, which is 0.8% of all installed base. – punund Sep 07 '21 at 07:51
yea, why should we drop the 0.8% since the rgba goes well? what's the benefit of #0000, shorter? – Oboo Cheng Sep 07 '21 at 13:45

score 34 · Answer 3 · edited Aug 29 '22 at 15:31

Simply add this to your stylesheet and simply add the class="no_highlights" attribute to the element you wish to apply this class to.

    .no_highlights{
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

or you can do this globally for all the elements by removing class name and doing this.

    button,
    textarea,
    input,
    select,
    a{
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     -webkit-tap-highlight-color: transparent;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
      user-select: none;
    
    }

Thanks :) but anyway, the blue border is there as an accessibility feature. It looks bad but, It helps someone who needs it most.

Please note that you shouldn't use (-*-)user-select:none on the input/select/textarea elements. This gives loads of trouble in Safari on iOS; ending up with no keyboard popping op when trying to focus on these elements. — Ken Verhaegen, Mar 26 '21 at 17:37

score 10 · Answer 4 · answered Apr 06 '20 at 01:31

10

According to the docs you can simply do this:

-webkit-tap-highlight-color: transparent; /* for removing the highlight */

It works for me on Chrome 68 for Android and Chrome 80 on Windows.

answered Apr 06 '20 at 01:31

Eric Mutta

1,144
1
11
15

LeulAria · Answer 5 · 2022-04-18T10:43:33.380

8

add to css

css

html {
   -webkit-tap-highlight-color: transparent;
}

tailwind

@layer base {
  html {
    -webkit-tap-highlight-color: transparent;
  }
}

edited Apr 18 '22 at 10:43

answered Mar 15 '22 at 18:19

LeulAria

333
3
9

you should specify that this is for Tailwind CSS – Oneezy Apr 02 '22 at 09:26

score -1 · Answer 6 · answered Jun 24 '23 at 03:17

-1

I think the most reasonable answer is to use -webkit-tap-highlight-color: transparent; It fuzzes in all browsers, and I myself implemented it on my blog https://www.ramlyhaba.com/

answered Jun 24 '23 at 03:17

Ramly Haba

1
2

Disable Blue Highlight when Touch/Press object with Cursor:Pointer

6 Answers6

css

tailwind

Linked