我注意到在某些浏览器上,当勾选此复选框时,它会显示蓝色的高亮。我不确定这是从哪里来的,因为我只在我的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>
能否解释一下这个效果是从哪里来的,以及如何去掉它?
[type=checkbox] {user-select: none}
- zer00neoutline: 0
的建议,请不要这样做。请参考http://www.outlinenone.com/(这对a11y /可访问性不利)。 - user753676