Active and focus states in CSS - Browser Rendering Trace

Render Flow - Active and focus states

[Parse CSS selectors] -> [Match :focus and :active pseudo-classes] -> [Apply styles on matched elements] -> [Repaint affected elements] -> [Update visual states]

The browser reads CSS and looks for elements that are focused or active. It then applies the special styles and redraws those elements to show the new visual states.

Render Steps - 3 Steps

Code Added:button { background-color: lightgray; border: 2px solid gray; padding: 1rem 2rem; font-size: 1.25rem; cursor: pointer; }

Before

[ ] (empty page)

→

After

[ button ]
[ Click me ]
Background: lightgray
Border: gray solid
Padding inside button

The button appears with a light gray background, gray border, and some padding making it look like a clickable box.

🔧 Browser Action:Creates button element box, applies base styles, triggers layout and paint

Code Sample

A button that changes color when clicked (active) and shows a blue outline when focused (keyboard or mouse focus).

CSS

<button>Click me</button>

CSS

button {
  background-color: lightgray;
  border: 2px solid gray;
  padding: 1rem 2rem;
  font-size: 1.25rem;
  cursor: pointer;
}
button:focus {
  outline: 3px solid blue;
  background-color: lightblue;
}
button:active {
  background-color: darkblue;
  color: white;
}

Render Quiz - 3 Questions

After applying step 2, what visual change indicates the button is focused?

A A blue outline appears around the button and background changes to light blue

B The button text becomes bold

C The button disappears

D The button border changes to red

Common Confusions - 3 Topics

Why doesn't the focus style show when I click the button with a mouse?

Focus styles appear when the element receives keyboard focus (like tabbing). Clicking with a mouse may not always show focus styles unless the element stays focused. See step 2 where focus triggers the outline.

💡 Focus styles appear on keyboard navigation or when element is focused, not just on mouse click.

Why does the active style only show while I hold the mouse button down?

The :active state applies only during the mouse button press (mouse down). Once released, the style goes away. See step 3 where background changes only while pressing.

💡 :active is temporary, only while pressing the mouse button.

Why can't I see the outline on some buttons?

Some browsers remove outlines by default or custom styles hide them. Always add a visible outline or focus style for accessibility. Our code in step 2 explicitly adds a blue outline.

💡 Always provide a visible focus style for keyboard users.

Property Reference

Property	Value Applied	Visual Effect	Common Use
background-color	lightblue (focus)	Changes background color to highlight focus	Show keyboard focus on interactive elements
outline	3px solid blue (focus)	Draws a visible border outside element to indicate focus	Accessibility for keyboard users
background-color	darkblue (active)	Changes background color to show button is pressed	Visual feedback on mouse click
color	white (active)	Changes text color for contrast on active background	Improve readability during active state

Concept Snapshot

Active and focus states use CSS pseudo-classes :active and :focus. :focus shows when an element is selected by keyboard or mouse, often with an outline. :active shows while clicking or pressing the element, changing background or color. These states provide visual feedback and improve accessibility. Always include visible focus styles for keyboard users.

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