有没有一种方法可以去掉复选框的蓝色高亮显示？

Question

有没有一种方法可以去掉复选框的蓝色高亮显示？

3

我注意到在某些浏览器上，当勾选此复选框时，它会显示蓝色的高亮。我不确定这是从哪里来的，因为我只在我的iPhone的Safari以及Chrome Developer Tools的设备模式中看到了这种行为。然而，桌面版的Chrome和Firefox根本没有包含这个高亮。

.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>

能否解释一下这个效果是从哪里来的，以及如何去掉它？

- Majestic Pixel

[type=checkbox] {user-select: none} - zer00ne

我添加了一个蓝色高亮的图像，只是为了更清晰明了。 - Majestic Pixel

值得一试，它适用于真正的浏览器。 - zer00ne

我对桌面浏览器的样式没有任何问题。问题似乎是由移动端交互引起的。 - Majestic Pixel

关于outline: 0的建议，请不要这样做。请参考http://www.outlinenone.com/（这对a11y /可访问性不利）。 - user753676

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- user753676 · Accepted Answer

也许是 tap-highlight-color，您可以使用以下代码将其设置为透明：

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

请参考 https://dev59.com/X2Ei5IYBdhLWcg3wuuUk#21003770 ，其中提到了 user-select: none 和 -webkit-touch-callout: none 的方法。

但是对于移动端的Chrome浏览器，你仍然需要设置 -webkit-tap-highlight-color 。