:focus
Quick Summary for :focus
The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.
Code Usage for :focus
/* Selects any <input> when focused */ input:focus {   color: red; } 
More Details for :focus

:focus

The :focus CSS pseudo-class represents an element (such as a form input) that has received focus. It is generally triggered when the user clicks or taps on an element or selects it with the keyboard's Tab key.

/* Selects any <input> when focused */ input:focus {   color: red; } 

Note: This pseudo-class applies only to the focused element itself. Use :focus-within if you want to select an element that contains a focused element.

Syntax

:focus

Examples

HTML

<div><input class="red-input" value="I'll be red when focused."></div> <div><input class="blue-input" value="I'll be blue when focused."></div> 

CSS

.red-input:focus {   background: yellow;   color: red; }  .blue-input:focus {   background: yellow;   color: blue; } 

Result

Accessibility concerns

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

:focus { outline: none; }

Never just remove the focus outline (visible focus indicator) without replacing it with a focus outline that will pass WCAG 2.1 SC 1.4.11 Non-Text Contrast.

Quick Tip: Never remove CSS outlines

Specifications

Specification
HTML Standard # selector-focus
Selectors Level 4 # focus-pseudo

See also

:focus-visible :focus-within Select your preferred language English (US)DeutschEspañolFrançais日本語한국어Português (do Brasil)Русский中文 (简体) 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...

You could also follow me on twitter. I have a couple of youtube channels if you want to see some video related content. RuneScape 3, Minecraft and also a coding channel here Web Dev.

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
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.
Unknown
Random CSS Property

prefix

The prefix descriptor of the @counter-style rule specifies content that will be prepended to the marker representation. If not specified, the default value will be "" (an empty string).
prefix (@counter-style) css reference