CSS :focus Selector

Posted in CSS Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 124 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The :focus selector in CSS is used to style an element that is currently focused by the user.

When an element, such as an input field or a button, receives focus (typically through keyboard interaction or mouse clicks), this pseudo-class allows you to apply specific styles to enhance usability and accessibility.

💡 Syntax

The signature of the :focus Selector is as follows:

Syntax

Copied

:focus {
    /* CSS properties */
}

This selector is mainly applied to interactive elements like <input>, <textarea>, <button>, and links (<a>), among others.

📝 Example

Let’s see how the :focus selector can be used to style focused elements:

☠️ HTML

HTML

Copied

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS :focus Selector Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form>
        <label for="email">Email:</label>
        <input type="email" id="email" placeholder="Enter your email">

        <label for="password">Password:</label>
        <input type="password" id="password" placeholder="Enter your password">

        <button type="submit">Login</button>
    </form>
</body>
</html>

🎨 CSS

CSS

Copied

/* Style for focused input fields */
input:focus {
    outline: none;
    border: 2px solid blue;
    background-color: #e0f7ff;
}

/* Style for focused button */
button:focus {
    outline: none;
    box-shadow: 0 0 5px blue;
}

In this example:

When the user focuses on the input fields, the border changes to blue, and the background color lightens.
The button, when focused, gets a shadow around it for better visibility.

💬 Usage Tips

Always use the :focus selector in combination with other states like :hover and :active to provide a comprehensive user experience across devices (especially for keyboard navigation).
You can customize the focus outline to better match your design, but be cautious about entirely removing the focus indicator, as it can hinder accessibility for users who rely on keyboard navigation.

⚠️ Common Pitfalls

Overriding default focus styles: While customizing the focus style, avoid removing the outline property without providing an alternative, as this can make navigation difficult for keyboard users.
Focus traps: Ensure that all interactive elements on the page are accessible via the keyboard, and users should be able to exit focusable elements easily. Avoid creating focus traps where the user can’t navigate away from an element.

🎉 Conclusion

The :focus selector is a key part of making web pages accessible and user-friendly.

It ensures that users can interact with elements visually when navigating via keyboard or other input devices. Proper usage of :focus not only enhances the user experience but also improves web accessibility.