:focus CSS Pseudo Class

Description

The CSS :focus pseudo-class is a selector that targets an HTML element when it gains focus, typically through user interaction, such as clicking with a mouse or navigating to it using the keyboard. When applied, it allows you to define styles for elements that are currently selected or active, making it a valuable tool for improving the accessibility and user experience of web forms and interactive elements.

Common use cases for :focus include changing the appearance of form fields, buttons, and links to provide visual feedback to users as they interact with these elements. This can include altering the element's background color, border, or text color to make it more noticeable when it is selected or focused.

Here's an example of how you might use the :focus pseudo-class in CSS:

/* Change the background color of an input field when it gains focus */

input:focus {

  background-color: lightblue;

  border: 2px solid blue;

}

In this example, when an input element receives focus, its background color will change to light blue, and it will have a blue border.

By leveraging the :focus pseudo-class, web developers can enhance the interactivity and accessibility of their websites by providing clear and intuitive visual cues to users as they interact with various elements on the page.

Syntax

:focus {
  /* ... */
}

Example

HTML

First name:<br>

  <input type="text" name="firstname">

  <br>

  Last name:<br>

  <input type="text" name="lastname">

CSS

input:focus {

   border: 2px solid red;

}

Result

Editor

Notes

Chrome does not add a style to the <a> element, to make it understand the a:focus rule, add the tabindex attribute to the <a> element.

Browser Support

The following table will show you the current browser support for the CSS :focus pseudo class.

Desktop

12	1	1	7	1

Tablets / Mobile

18	4	10.1	1	1	4.4

Last updated by CSSPortal on: 1st October 2023

Support Us