CSS - Forms & Focus

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 12–18 minutes

Forms are critical to UX. Style controls consistently and ensure visible, accessible focus states.

Learning Objectives

• Style basic controls (input, select, textarea) with consistent spacing and borders.
• Use :focus-visible and state selectors for accessible interactions.

Details & Examples

input, select, textarea{ padding:.5rem .75rem; border:1px solid #e2e8f0; border-radius: .5rem; }
:focus-visible{ outline: 3px solid #34d399; outline-offset: 2px; }
:disabled{ opacity:.6; cursor:not-allowed; }
input:invalid{ border-color: #ef4444; }

Try it

Common Pitfalls

• Removing focus outlines without replacing them harms keyboard users.
• Overly low contrast placeholders impact readability.

Checks for Understanding

1. Which pseudo-class is recommended for focus styling?

Exercises

1. Style focus-visible states for inputs and a submit button; verify keyboard users can track focus.
2. Create invalid and disabled styles that meet contrast requirements.