CSS Essentials·Positioning and systems

Forms and states

Make inputs obvious in every state, especially with a keyboard.

Beginner 14 min read Lesson 13 of 480 Challenge included

What you will be able to do

Style hover, focus, disabled and error states
Keep focus visible
Pair colour with text or icons

Every interactive control needs a visible hover, focus, disabled and error state. Keyboard focus is not optional: never remove it without a clear replacement.

forms.cssCSS

.field input {
  border: 1px solid #d6d0c7;
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.field input:hover {
  border-color: #a8a29e;
}

.field input:focus-visible {
  outline: none;
  border-color: #2f6fed;
  box-shadow: 0 0 0 3px rgb(47 111 237 / 0.25);
}

.field input:disabled {
  background: #f1eee9;
  color: #a8a29e;
  cursor: not-allowed;
}

.field.is-invalid input {
  border-color: #dc2626;
}

Live exampleInput states

State	Communicate it with
Hover	A small border or surface change
Focus	A visible ring, not just a colour change
Disabled	Muted surface plus a not-allowed cursor
Error	Border and a text message, never colour alone

Your turn

Add an error focus state

Medium

Give invalid inputs a red border, and a visible focus ring that stays red.

CSS · starter

.field.is-invalid input {
  /* your rules here */
}

Check your understanding before moving on.

Knowledge checkQuestion 1

Which pseudo-class targets keyboard focus without firing on every click?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Transitions and motion

Lesson 13 of 480 · 0% of course