Question
CSS - focus not working on any browser Why?
Hi there I really never had this problem but today I dont't really understand why the focus is not working - I tried to built a custom switch without using js --- and it looks good and with the mouse it is working. Unfortunately not with the focus state -
but here is the code:
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>
I expect the focus highlightning