Привет, у меня действительно никогда не было этой проблемы, но сегодня я не совсем понимаю, почему фокус не работает — я попытался создать собственный переключатель без использования js — и он выглядит хорошо, и с мышью он работает. К сожалению, не с состоянием фокуса -
но вот код:
input {
appearance: none;
position: relative;
display: inline-block;
background: lightgrey;
height: 1.65rem;
width: 2.76rem;
vertical-align: middle;
border-radius: 2rem;
box-shadow: 0px 1px 3px #0003 inset;
transition: 0.25s linear background;
}
input::before {
content: "";
display: block;
width: 1.25rem;
height: 1.25rem;
background: #fff;
border-radius: 1.2rem;
position: absolute;
top: .2rem;
left: .2rem;
box-shadow: 0px 1px 3px #0003;
transition: 0.25s linear transform;
transform: translateX(0rem);
}
:checked {
background: green;
}
:checked::before {
transform: translateX(1rem);
}
input:focus-visible {
outline: 2px solid dodgerblue;
outline-offset: 2px;
}
input:focus {
outline: none;
outline-color: transparent;
}
`<label for = "awesomeFeature">
<input type = "checkbox" name = "awesomeFeature" id = "awesomeFeature">
my awesome feature
</label>Я ожидаю выделения фокуса
🤔 А знаете ли вы, что...
С помощью CSS можно создавать эффекты параллакса для элементов на веб-странице.
Это связано с тем, что селекторы CSS input:focus-visible и input:focus совпадают, когда элемент находится в фокусе.
:focus-visible не более конкретно, чем :focus. В отсутствие каких-либо других селекторов браузер считает ваши селекторы input:focus-visible и input:focus такими же важными, как друг друга. Теперь ваши input:focus-visible правила имеют видимый контур, но ваши input:focus правила имеют контур none. Браузер не может делать и то, и другое, поэтому он выбирает последнее правило этой специфики, которое будет применяться. Правило input:focus побеждает, и элементу присваивается контур none.
Чтобы исправить это, вы можете изменить порядок CSS:
input:focus {
outline: none;
outline-color: transparent;
}
input:focus-visible {
outline: 2px solid dodgerblue;
outline-offset: 2px;
}
При этом правило :focus-visible является последним и, следовательно, будет применяться именно оно.