Я заметил, что этот флажок иногда отображает синюю подсветку при проверке в определенных браузерах. Я не совсем уверен, откуда это взялось, поскольку мне удалось увидеть такое поведение только в Safari на моем iPhone, а также в режиме устройства из 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>
Может кто-нибудь объяснить, откуда он и как убрать этот эффект?