:focus-visible
Quick Summary for :focus-visible
The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)
Code Usage for :focus-visible
<input value="Default styles"><br> <button>Default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> 
More Details for :focus-visible

:focus-visible

The :focus-visible pseudo-class applies while an element matches the :focus pseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element. (Many browsers show a "focus ring" by default in this case.)

This selector is useful to provide a different focus indicator based on the user's input modality (mouse vs. keyboard).

Syntax

:focus-visible

Examples

Basic example

In this example, the :focus-visible selector uses the UA's behavior to determine when to match. Compare what happens when you click on the different controls with a mouse, versus when you tab through them using a keyboard. Note the difference in behavior from elements styled with :focus.

<input value="Default styles"><br> <button>Default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button> 
input, button {   margin: 10px; }  .focus-only:focus {   outline: 2px solid black; }  .focus-visible-only:focus-visible {   outline: 4px dashed darkorange; } 

Selectively showing the focus indicator

A custom control, such as a custom element button, can use :focus-visible to selectively apply a focus indicator only on keyboard-focus. This matches the native focus behavior for controls like <button>.

<custom-button tabindex="0" role="button">Click Me</custom-button> 
custom-button {   display: inline-block;   margin: 10px; }  custom-button:focus {   /* Provide a fallback style for browsers      that don't support :focus-visible */   outline: 2px solid red;   background: lightgrey; }  custom-button:focus:not(:focus-visible) {   /* Remove the focus indicator on mouse-focus for browsers      that do support :focus-visible */   background: transparent; }  custom-button:focus-visible {   /* Draw a very noticeable focus style for      keyboard-focus on browsers that do support      :focus-visible */   outline: 4px dashed darkorange;   background: transparent; } 

Polyfill

You can polyfill :focus-visible using focus-visible.js.

Accessibility concerns

Low vision

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators

Cognition

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

Specifications

Specification
Selectors Level 4 # the-focus-visible-pseudo

See also

:focus :focus-within Select your preferred language English (US)EspañolFrançais日本語Русский中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
Our brains are wired to find things we are looking for - if your always cynical or waiting for things to go wrong, then your life will reflect that. On the other hand, having a positive outlook on life will bring you joy and provide you with inspiration when you least expect it ☀️🍉🌴
Unknown
Random CSS Property

<length>

The <length> CSS data type represents a distance value. Lengths can be used in numerous CSS properties, such as width, height, margin, padding, border-width, font-size, and text-shadow.
length#vw css reference