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.