Reputation: 199
Accordingly to the example on https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible (under basic example), clicking the input with the placeholder ":focus-visible only" with my mouse should not show the orange outline styles – but it does. Caniuse.com tells me, my chrome version supports :focus-visible.
Any hints?
Upvotes: 7
Views: 15914
Reputation: 509
The css works for me
For desktop
.momsType:focus-visible{
outline:none!important;
}
For mobile
.momsType:focus{
outline:none!important;
}
Upvotes: 0
Reputation: 4322
The working draft spec states that browsers manufacturers are free to choose their own criteria for matching :focus-visible
as opposed to just regular old :focus
, but the spec does recommend several suggestions to be used as a starting point, including this:
Any element which supports keyboard input (such as an input element...) should always match
:focus-visible
when focused.
To me, this says that ALL input elements should always match :focus-visible
.
In the example that you referenced, you'll notice that the button behavior is as expected. If you click the button with a mouse, it does not match :focus-visible
, but if you select it with keyboard navigation, then it does.
Upvotes: 9