Interaction states and form styling

What you will build

Style hover, focus, disabled, and invalid states while preserving visible keyboard focus.

Understand the idea first

Never remove outlines without an equivalent replacement.

Build it step by step

a:hover {
  color: #9a3412;
}
:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
input,
textarea,
select,
button {
  font: inherit;
}
input:invalid:not(:placeholder-shown) {
  border-color: #b91c1c;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

1. Tab through the page before and after adding focus-visible.
2. Make controls inherit typography and provide generous targets.
3. Enter an invalid email and keep native text feedback.
4. Verify both hover and focus states.

Read the important lines

• Never remove outlines without an equivalent replacement.
• :focus-visible emphasizes keyboard focus.
• Errors need text, not color alone.

Common mistakes and what to check

Practice without copying

Finish normal, focus, invalid, and disabled form states and capture evidence.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases