Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
[CSS Selector] E:focus

[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

style.css

/* change background when a text input is focused */
input:focus { background-color: yellow;}

/* style for a focused textarea */
textarea:focus { border: 2px solid #3498db; outline: none;}

/* style for a focused link (keyboard navigation) */
a:focus { outline: 3px solid #e74c3c; outline-offset: 2px;}

/* style for a focused button */
button:focus { box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.5); outline: none;}

/* style a container when any child inside it is focused */
.form-group:focus-within { background-color: #f0f8ff;}

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+ ○

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.

If you find any errors or copyright issues, please contact us.

Home