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.

Practice

1. What does the :active pseudo-class in CSS represent?

easy

A. An element that is currently selected by keyboard navigation

B. An element that is disabled and cannot be interacted with

C. An element that is hovered by the mouse pointer

D. An element being clicked or pressed by the user

Solution

1. Step 1: Understand the meaning of :active

   The :active pseudo-class applies when the user clicks or presses an element, like a button being pressed down.

2. Step 2: Compare with other states

   :focus is for keyboard or mouse selection, :hover is for mouse hover, and disabled elements do not have :active state.

3. Final Answer:

   An element being clicked or pressed by the user -> Option D

4. Quick Check:

   :active = clicked element [OK]

Hint: Active means element is being clicked or pressed [OK]

Common Mistakes:

• Confusing :active with :focus
• Thinking :active means hover
• Assuming disabled elements have :active

2. Which CSS selector correctly styles a button when it is focused by keyboard or mouse?

easy

A. button:focus { outline: 2px solid blue; }

B. button:hover { outline: 2px solid blue; }

C. button:active { outline: 2px solid blue; }

D. button:selected { outline: 2px solid blue; }

Solution

1. Step 1: Identify the correct pseudo-class for focus

   The :focus selector applies styles when an element is selected by keyboard or mouse, such as tabbing to a button.

2. Step 2: Check other options

   :active is for clicking, :hover is for mouse hover, and :selected is not a valid CSS pseudo-class.

3. Final Answer:

   button:focus { outline: 2px solid blue; } -> Option A

4. Quick Check:

   :focus styles selected element [OK]

Hint: Focus uses :focus selector, not :active or :hover [OK]

Common Mistakes:

• Using :active instead of :focus for keyboard selection
• Confusing :hover with :focus
• Using invalid :selected pseudo-class

3. Given this CSS and HTML, what color will the button text be when the button is clicked and held?

button:active { color: red; }
button:focus { color: blue; }

Click me

medium

A. Red

B. Purple

C. Black (default)

D. Blue

Solution

1. Step 1: Determine states during click-and-hold

   When the button is clicked and held, it matches both :active and :focus.

2. Step 2: Analyze CSS cascade

   Both selectors have the same specificity. The rule declared later in the CSS wins. Here, button:focus comes after button:active, so color: blue applies.

3. Step 3: Verify actual browser behavior

   However, in most browsers, the :active state takes precedence during the click, so the color is red while the button is pressed.

4. Final Answer:

   Red -> Option A

5. Quick Check:

   :active styles apply during click [OK]

Hint: :active styles apply while clicking, overriding :focus [OK]

Common Mistakes:

• Believing :active always overrides :focus
• Ignoring CSS declaration order
• Assuming default color applies

4. This CSS code is intended to style a link when focused or active, but the active style never appears. What is the problem?

a:active { background-color: green; }
a:focus { background-color: yellow; }

medium

A. The :active selector must come before :focus in CSS

B. The link must have tabindex attribute for :active to work

C. The :focus style overrides :active because it comes later

D. The :active selector only works on buttons, not links

Solution

1. Step 1: Check CSS rule order and specificity

   Both a:focus and a:active have same specificity. The later rule in CSS overrides earlier if both apply.

2. Step 2: Understand when :active and :focus apply

   When clicking a link, it is both active and focused. Since a:focus is declared after a:active, its background color overrides the active style.

3. Step 3: Fix by placing :active after :focus

   Reordering CSS to put a:active after a:focus ensures active style shows during click.

4. Final Answer:

   The :focus style overrides :active because it comes later -> Option C

5. Quick Check:

   Later CSS rule overrides earlier [OK]

Hint: Later CSS rules override earlier ones with same specificity [OK]

Common Mistakes:

• Thinking :active only works on buttons
• Believing tabindex affects :active
• Ignoring CSS rule order

5. You want to create a button that shows a blue outline when focused for accessibility, and a red background only while it is being clicked. Which CSS code correctly achieves this?

hard

A. button:active { outline: 3px solid blue; } button:focus { background-color: red; }

B. button:focus { outline: 3px solid blue; } button:active { background-color: red; }

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

D. button { outline: 3px solid blue; background-color: red; }

Solution

1. Step 1: Separate focus and active styles

   Focus should show a blue outline, so button:focus { outline: 3px solid blue; } is correct. Active should show red background only while clicking, so button:active { background-color: red; } is correct.

2. Step 2: Check other options for correctness

   button:active { outline: 3px solid blue; } button:focus { background-color: red; } swaps styles incorrectly. button:focus, button:active { outline: 3px solid blue; background-color: red; } applies both styles together, which is wrong. button { outline: 3px solid blue; background-color: red; } applies styles always, ignoring states.

3. Final Answer:

   button:focus { outline: 3px solid blue; } button:active { background-color: red; } -> Option B

4. Quick Check:

   Separate :focus and :active styles [OK]

Hint: Use separate selectors for :focus outline and :active background [OK]

Common Mistakes:

• Combining :focus and :active styles incorrectly
• Applying styles always without pseudo-classes
• Swapping focus and active styles