Active and focus states in CSS - Deep Dive

Overview - Active and focus states

What is it?

Active and focus states are special styles applied to elements when users interact with them. The focus state appears when an element is selected or ready to receive input, often via keyboard navigation. The active state shows when an element is being clicked or pressed. These states help users understand which part of the page they are interacting with.

Why it matters

Without active and focus states, users might get lost or confused about where they are on a page, especially those using keyboards or assistive devices. These states improve usability and accessibility by giving clear visual feedback during interaction. This makes websites easier and safer to use for everyone.

Where it fits

Before learning active and focus states, you should understand basic CSS selectors and styling. After this, you can explore advanced accessibility techniques and interactive UI design. This topic fits into the broader journey of making web pages interactive and user-friendly.

Mental Model

Core Idea

Active and focus states are visual signals that show when a user is interacting with or ready to interact with an element.

Think of it like...

It's like a light turning on when you pick up a phone or press a button, showing that the device is ready or responding to your touch.

┌───────────────┐
│   Element     │
│               │
│  [Normal]     │
│               │
├───────────────┤
│ Focused State │ ← Keyboard or mouse selects this
│ (outline, glow)│
├───────────────┤
│ Active State  │ ← Mouse button pressed down
│ (color change)│
└───────────────┘

Build-Up - 6 Steps

1

Foundation

What are focus and active states

Concept: Introduce the idea of focus and active states as CSS pseudo-classes that style elements during interaction.

In CSS, :focus applies styles when an element is selected, usually by keyboard or mouse click. :active applies styles when the element is being clicked or pressed. For example, a button can change color when focused or pressed.

Result

Elements visually change when focused or clicked, helping users know where they are on the page.

Understanding these states is the first step to making interactive elements clear and accessible.

2

Foundation

Using :focus and :active selectors

Concept: Learn how to write CSS rules using :focus and :active pseudo-classes.

Example CSS: button:focus { outline: 2px solid blue; } button:active { background-color: darkblue; color: white; } This code changes the button's outline when focused and background when active.

Result

Buttons show a blue outline when focused and dark blue background when clicked.

Knowing how to target these states lets you control user feedback during interaction.

3

Intermediate

Focus visibility and accessibility

🤔Before reading on: do you think removing focus outlines improves design or harms usability? Commit to your answer.

Concept: Explore why focus outlines are important for keyboard users and how to style them accessibly.

Browsers add a default outline on focus to help keyboard users see where they are. Removing this outline without replacement hides focus, making navigation confusing. Instead, customize focus styles to fit your design but keep them visible and clear.

Result

Users relying on keyboard navigation can see which element is focused, improving accessibility.

Understanding focus visibility prevents common accessibility mistakes that exclude keyboard users.

4

Intermediate

Combining active and focus states

🤔Before reading on: do you think :active and :focus can apply at the same time? Commit to yes or no.

Concept: Learn how active and focus states can overlap and how to style them distinctly.

When clicking a button, it can be both focused and active. CSS applies both :focus and :active styles. You can write combined selectors like button:focus:active to style this state uniquely, ensuring clear feedback for pressing and selection.

Result

Buttons show distinct styles when focused, active, or both, improving interaction clarity.

Knowing how these states combine helps create smooth, intuitive user experiences.

5

Advanced

Managing focus for custom components

🤔Before reading on: do you think non-interactive elements can receive focus by default? Commit to yes or no.

Concept: Understand how to make custom elements focusable and manage focus styles properly.

By default, only certain elements like links and buttons receive focus. To make custom elements focusable, add tabindex="0". Then style :focus to show when they are selected. This is essential for accessibility in custom UI components.

Result

Custom elements become keyboard navigable with visible focus states.

Knowing how to manage focus on custom elements ensures your UI is accessible to all users.

6

Expert

Focus-visible and user preference detection

🤔Before reading on: do you think focus styles should always show on mouse clicks? Commit to yes or no.

Concept: Learn about the :focus-visible pseudo-class that shows focus only when needed, respecting user input method.

:focus-visible applies focus styles only when the user navigates via keyboard or assistive tech, not mouse clicks. This avoids distracting outlines on mouse clicks but keeps keyboard focus visible. It improves user experience by adapting to input method.

Result

Focus outlines appear only when helpful, reducing visual noise for mouse users.

Understanding :focus-visible helps create polished, user-friendly interfaces that respect different ways people interact.

Under the Hood

Browsers track user input methods and element states to apply :focus and :active styles. When an element receives keyboard focus or is clicked, the browser updates its internal focus state and applies matching CSS rules. The :focus-visible pseudo-class uses heuristics to detect if focus should be shown based on input type, improving UX.

Why designed this way?

These states were designed to provide clear, consistent feedback during interaction. Early web lacked keyboard accessibility, so :focus was added to help keyboard users. :active mimics physical button pressing. :focus-visible was introduced later to balance accessibility with visual design preferences.

User Input ──► Browser Focus Manager ──► Element State
     │                     │
     ▼                     ▼
 Keyboard/Mouse       :focus, :active, :focus-visible
     │                     │
     ▼                     ▼
 CSS applies styles based on element state

Myth Busters - 4 Common Misconceptions

Quick: Does removing focus outlines improve website design? Commit yes or no.

Common Belief: Removing focus outlines makes the site look cleaner and more modern.

Reality: Removing focus outlines without replacement hides keyboard focus, making navigation confusing or impossible for keyboard users.

Why it matters: Users who rely on keyboard navigation may get lost or trapped, harming accessibility and user experience.

Quick: Can :active styles stay visible after clicking? Commit yes or no.

Common Belief: :active styles remain visible after the click is done to show the element was pressed.

Reality: :active styles only apply while the mouse button is pressed; they disappear immediately after release.

Why it matters: Expecting :active to persist can cause confusion when styles vanish instantly, so other states or scripts are needed for lasting feedback.

Quick: Do all elements receive focus by default? Commit yes or no.

Common Belief: Any element on the page can receive focus by default.

Reality: Only interactive elements like links, buttons, and form controls receive focus by default; others need tabindex to be focusable.

Why it matters: Assuming all elements are focusable can lead to inaccessible custom components.

Quick: Does :focus-visible show focus on mouse clicks? Commit yes or no.

Common Belief: :focus-visible always shows focus styles regardless of input method.

Reality: :focus-visible shows focus only when keyboard or assistive technology is used, not on mouse clicks.

Why it matters: Misunderstanding this can cause inconsistent focus styling and confuse users.

Expert Zone

1

Focus styles can be customized per element type to match design while preserving accessibility, but over-styling can confuse users.

2

:focus-visible support varies; fallback styles and JavaScript polyfills may be needed for consistent behavior across browsers.

3

Active state can be triggered by keyboard (space/enter) as well as mouse, so styling should consider both input methods.

When NOT to use

Avoid removing focus outlines without a clear, accessible replacement. For complex interactive widgets, consider managing focus with JavaScript for better control. Use :focus-visible only when browser support is sufficient or with polyfills.

Production Patterns

In production, focus and active states are styled to match brand colors and UI design while ensuring accessibility. Developers often use :focus-visible to reduce visual noise. Custom components use tabindex and ARIA roles to manage focus properly. Testing with keyboard navigation and screen readers is standard practice.

Connections

Keyboard Accessibility

Builds-on

Understanding focus states is essential to making websites navigable by keyboard, which is a core part of accessibility.

User Experience Design

Enhances

Active and focus states provide immediate visual feedback, improving how users perceive and interact with interfaces.

Human-Computer Interaction (HCI)

Shares principles

The concept of visual feedback during interaction is a fundamental HCI principle, showing how web design follows broader interaction science.

Common Pitfalls

#1 Removing focus outlines without replacement.

Wrong approach:

button:focus {
outline: none;
}

Correct approach:

button:focus {
outline: 2px solid #005fcc;
outline-offset: 2px;
}

Root cause:

Misunderstanding that focus outlines are ugly rather than essential for keyboard users.

#2 Styling :active but ignoring keyboard activation.

Wrong approach:

button:active {
background-color: red;
}
/* No focus styles */

Correct approach:

button:focus, button:active {
background-color: red;
outline: 2px solid blue;
}

Root cause:

Assuming only mouse clicks matter for active state, ignoring keyboard users.

#3 Assuming all elements are focusable by default.

Wrong approach:

Click me
/* No tabindex, no focus styles */

Correct approach:

Click me
/* Add focus styles in CSS */

Root cause:

Not knowing that only certain elements receive focus without tabindex.

Key Takeaways

Active and focus states give users clear visual feedback during interaction, improving usability and accessibility.

Focus outlines are essential for keyboard users and should never be removed without a visible replacement.

:active styles apply only while an element is being pressed, and :focus styles show when an element is selected.

Custom elements need tabindex="0" to be focusable and accessible via keyboard.

The :focus-visible pseudo-class helps show focus only when needed, balancing accessibility with design.