CSS Essentials·Practice drills 12

Drill 18: Find the core line — Forms and states

Point to the line that does the main work and explain why.

Beginner 5 min read Lesson 301 of 480 Challenge included
What you will be able to do
  • Point to the line that does the main work and explain why.

Practice task

Point to the line that does the main work and explain why.

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;
}
Your turn

Write your answer

Easy

Point to the line that does the main work and explain why.

TEXT · starter
Your answer…
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.
Sign in
Finished reading?

Lock in what you just learned.

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

Lesson 301 of 480 · 0% of course