<pre class="brush: css notranslate"><code><span class="token comment">/ Selects any &lt;input&gt; when focused /</span> <span class="token selector">input:focus</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre>

: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.

: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.

Specifications

See also