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