Is there a way to remove the blue highlight for a checkbox?

Question

I have noticed that this checkbox will sometimes display a blue highlight when checked on certain browsers. I'm not entirely sure where this comes from, as I have only managed to see this behavior from Safari on my iPhone, as well as Device Mode from Chrome Developer Tools. However, desktop Chrome and Firefox do not include the highlight at all.

.center {
 top: 50%;
 left: 50%;
 position: absolute;
 transform: translate(-50%, -50%);
}

.switch {
 width: 120px;
 height: 68px;
 position: relative;
 display: inline-block;
}

.switch input {
 visibility: hidden;
}

.slider {
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 cursor: pointer;
 position: absolute;
 transition: 0.375s;
 border-radius: 68px;
 background-color: #414b55;
}

.slider:before {
 left: 8px;
 bottom: 8px;
 width: 52px;
 height: 52px;
 content: "";
 position: absolute;
 transition: 0.375s;
 border-radius: 50%;
 background-color: #ffffff;
}

input:checked + .slider {
 background-color: #fa6400;
}

input:checked + .slider:before {
 transform: translateX(52px);
}

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Example</title>
 </head>
 <body>
  <div class="center">
   <label class="switch">
    <input type="checkbox">
    <span class="slider"></span>
   </label>
  </div>
 </body>
</html>

Could someone explain where it comes from and how to remove this effect?

I added an image of the blue highlight, just to make it more clear. — Majestic Pixel, Apr 19 '20 at 17:20
`[type=checkbox] {outline: 0}` you might need to add `!important` — zer00ne, Apr 19 '20 at 17:22
I have no issue with the styling as it is when it comes to desktop browsers. The issue seems to be caused by mobile interaction. — Majestic Pixel, Apr 19 '20 at 17:22
Regarding the `outline: 0` suggestion, please don't do this. See http://www.outlinenone.com/ (this is bad for a11y / accessibility). — , Apr 19 '20 at 17:29

score 8 · Accepted Answer · 2020-04-19T17:41:44.367

8

It may be the tap-highlight-color which you can make transparent with the following code:

.switch {
-webkit-tap-highlight-color: transparent
}

See also https://stackoverflow.com/a/21003770/753676 which mentions this and the user-select: none and -webkit-touch-callout: none approach.

But for Chrome on mobile you still need the -webkit-tap-highlight-color setting.

edited Apr 19 '20 at 17:41

answered Apr 19 '20 at 17:23

Without knowing the HTML and CSS? what is the code snippet for then? – Mechanic Apr 19 '20 at 17:30
Thank you! This solved the issue. Although, I did include my code from the very beginning :) – Majestic Pixel Apr 19 '20 at 17:33
Ah sorry, just saw it now =) To which element did you apply it? – Apr 19 '20 at 17:33
The input or the label? – Apr 19 '20 at 17:34
1

I simply applied it to the label tag. – Majestic Pixel Apr 19 '20 at 17:37

Is there a way to remove the blue highlight for a checkbox?

1 Answers1