有没有办法删除复选框的蓝色突出显示？答案

【问题标题】：Is there a way to remove the blue highlight for a checkbox?有没有办法删除复选框的蓝色突出显示？
【发布时间】：2020-08-02 02:53:29
【问题描述】：

我注意到，在某些浏览器上选中此复选框时，有时会显示蓝色突出显示。我不完全确定这是从哪里来的，因为我只能在我的 iPhone 上的 Safari 以及 Chrome 开发者工具的设备模式中看到这种行为。但是，桌面版 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>

有人能解释一下它的来源以及如何消除这种影响吗？

【问题讨论】：

[type=checkbox] {user-select: none}
这似乎并没有消除突出显示。
我添加了蓝色高光的图像，只是为了让它更清晰。
值得一试，它适用于真正的浏览器。
[type=checkbox] {outline: 0} 您可能需要添加!important

标签： html css

【解决方案1】：

可能是tap-highlight-color，您可以使用以下代码使其透明：

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

另见https://stackoverflow.com/a/21003770/753676，其中提到了这一点以及user-select: none 和-webkit-touch-callout: none 方法。

但对于移动设备上的 Chrome，您仍然需要 -webkit-tap-highlight-color 设置。

【讨论】：

不知道 HTML 和 CSS？那么sn-p的代码是什么？
谢谢！这解决了这个问题。虽然，我确实从一开始就包含了我的代码:)
抱歉，现在才看到 =) 你把它应用到了哪个元素上？
输入还是标签？
我只是将它应用到标签标签上。