Understanding the CSS :focus Pseudo-class

The :focus pseudo-class in CSS is used to apply styles to an element when it has received focus. This is a common way to highlight form fields or interactive elements when they are active, enhancing user experience by providing visual feedback during interaction.

What Is the :focus Pseudo-class?

The :focus pseudo-class represents an element that has received focus, either through user interaction (such as clicking or tapping) or by navigating to it via the keyboard (e.g., using the Tab key). It allows you to style elements when they are ready to receive input from the user.

Basic Usage

The :focus pseudo-class is used by appending it to a selector:

selector:focus {
    /* CSS properties */
}

Example: Styling an Input Field on Focus

HTML:

<input type="text" class="input-field" placeholder="Enter your name">

CSS:

.input-field {
    border: 1px solid #ccc;
    padding: 10px;
}

.input-field:focus {
    border-color: #66afe9;
    outline: none;
    box-shadow: 0 0 5px rgba(102, 175, 233, 0.6);
}

In this example, when the user clicks on the input field or navigates to it using the keyboard, the border color changes, and a subtle box shadow appears to indicate focus.

Styling Links on Focus

The :focus pseudo-class is often used with links to indicate when they are active or navigated to via keyboard:

a:focus {
    outline: 2px dashed #f00;
}

This rule adds a red dashed outline around links when they receive focus, improving accessibility for users who navigate via keyboard.

Combining :focus with :hover and :active

You can combine the :focus pseudo-class with :hover and :active to create consistent styles for interactive elements:

.button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
}

.button:hover,
.button:focus,
.button:active {
    background-color: #0056b3;
}

In this example, the button changes to a darker blue when hovered over, focused, or active, providing consistent feedback across different interaction methods.

Removing the Default Focus Outline

Browsers often apply a default outline to elements when they receive focus. While it's possible to remove this outline, it's important to provide an alternative focus indicator to maintain accessibility:

.button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,123,255,0.5);
}

This removes the default outline and replaces it with a custom box shadow. Avoid removing focus indicators without providing an accessible alternative, as this can make your site difficult to navigate for users who rely on keyboard navigation.

Accessibility Considerations

Focus indicators are crucial for users who navigate websites using a keyboard or assistive technologies. Ensuring that focused elements are clearly highlighted improves the usability and accessibility of your site.

When customizing focus styles, make sure that:

• The focus indicator is visible and has sufficient contrast.
• The focus style is consistent across different elements.
• You avoid removing focus styles without providing an alternative.

Focus on Different Elements

The :focus pseudo-class can be applied to various elements, including:

• Input elements: <input>, <textarea>, <select>, <button>
• Links: <a> elements with an href attribute
• Interactive elements: Any element with a tabindex attribute

Example: Focusing a Div with tabindex

HTML:

<div class="focusable" tabindex="0">Focusable Div</div>

CSS:

.focusable {
    padding: 20px;
    background-color: #f8f9fa;
}

.focusable:focus {
    outline: 2px solid #28a745;
}

By adding tabindex="0" to a <div>, it becomes focusable, and the :focus styles are applied when it receives focus.

Conclusion

The :focus pseudo-class is a fundamental tool in CSS for enhancing user interaction and accessibility. By styling elements when they receive focus, you provide essential visual cues that improve navigation and usability for all users, including those relying on keyboard navigation or assistive technologies.

Remember to always maintain or enhance focus indicators when customizing styles to ensure your website remains accessible to everyone.