Label and placeholder

Learn label and ::placeholder styles.

Label styles

The <label> tag tells what a form field is for. By default the browser shows it inline and plain. That is rarely enough in real forms.

To make a label readable, set font-size, font-weight and margin-bottom. The label then sits bold above its field; the user instantly knows what to enter.

The ::placeholder pseudo-element

The faint hint text inside an input is the placeholder. It disappears once the user starts typing. The browser shows it in a pale gray.

To change that color, use the ::placeholder pseudo-element. Example: input::placeholder { color: #6b7280; }. The hint then matches the brand color or a more readable tone.

Form layout

When you lay out a form, label and field must align well. The simplest way: make the label a block, put the field below. Both stack neatly, line by line.

For that, write label { display: block; margin-bottom: 4px; }. The input then drops to its own line. Add margin-bottom between fields too; they no longer cram together.

Exercise Write label and placeholder styles

Write two declaration blocks. For label: display: block;, font-size: 0.95rem;, margin-bottom: 4px;. For input::placeholder: color: #6b7280;.

Show example solution

open two selectors; write the declarations one below the other.
Example solution:
label {
  display: block;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
input::placeholder {
  color: #6b7280;
}

Test yourself

Which changes the placeholder color?
- input:placeholder { ... }
- input.placeholder { ... }
- input::placeholder { ... }
- input--placeholder { ... }
Show answer

input::placeholder { ... } — Correct! ::placeholder is a pseudo-element with two colons.

Change the placeholder color

input::placeholder {
  color: ____;
}

Show answer

input::placeholder {
  color: #6b7280;
}

Match form elements

label

field caption
::placeholder

hint text
input

data field
button

submit control

Next lesson: Focus states

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies