Checkbox and radio
Learn checkbox and radio styles.
The checkbox and radio default
The checkbox and radio input types are for choices: the first for many, the second for one. The browser draws them as a small square and circle.
The default look is tiny, off-brand, and varies across browsers. Designers usually build a custom look: paint the box, mark the checked state with their own colors.
The appearance property
To build a custom look, you first strip the default shape drawn by the browser. For that, write appearance: none;.
This property tells the browser to skip its standard widget. The checkbox and radio then behave like ordinary boxes; you freely set width, height, border and background. Add the :checked pseudo-class to draw the selected state.
A custom checkbox look
After appearance: none, you paint the box freely. A common pattern: a square, rounded corners, a filled mark on check.
Example: input[type="checkbox"] { width: 20px; height: 20px; border: 2px solid #2563eb; border-radius: 4px; }. Then set a blue background for input[type="checkbox"]:checked. The box now matches the brand and is easy to tap.
Exercise Build a custom checkbox
Write two declaration blocks. For input[type="checkbox"]: appearance: none;, width: 20px;, height: 20px;, border: 2px solid #2563eb;. For input[type="checkbox"]:checked: background: #2563eb;.
Show example solution
open input[type="checkbox"], write four declarations; then add a background for :checked.
Example solution:
input[type="checkbox"] {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #2563eb;
}
input[type="checkbox"]:checked {
background: #2563eb;
}Test yourself
-
What does appearance: none do?
- Adds shadow to the input
- Removes the browser's default look
- Changes the border color
- Increases the font size
Show answer
Removes the browser's default look — Correct! appearance: none resets the default look drawn by the browser.
-
Strip the default look
input[type="checkbox"] { ____: none; width: 20px; height: 20px; }Show answer
input[type="checkbox"] { appearance: none; width: 20px; height: 20px; } -
Match choice elements
- checkbox
- tick box
- radio
- option button
- appearance: none
- resets defaults
- input[type="checkbox"]
- attribute selector