[CSS Selector] E:focus

Using selector:focus, you can apply styles to the element that is currently focused. "Focused" refers to a state where a form input is active or an element such as an anchor is selected via the keyboard Tab key. This is commonly called a "pseudo-class" (:focus pseudo-class).

Sample Code

input:focus { background-color: yellow;} /* Makes the background of a focused (active) input element yellow. */

Browser Preview

input:focus { background-color: yellow;} /* Makes the background of a focused (active) input element yellow. */

<p>The background color changes while typing: <input type="text"></p>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

IE

11 ○

10 ○

9 ○

8 ○

7 ×

6 ×

Opera

7+ ○

6 or earlier ×

Mobile

iOS Safari

1+ ○

Android Browser

4.4+ ○

3 or earlier ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version data based on MDN.

Home

Tweet

シェアする