chrs
chrs

Reputation: 199

chrome issue with :focus-visible? (shows focus-visible styles on normal mouse focus)

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

Answers (2)

The css works for me

For desktop

.momsType:focus-visible{
 outline:none!important;
}

For mobile

.momsType:focus{
outline:none!important;

}

Upvotes: 0

Josh
Josh

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

Related Questions