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

Next lesson: Summary - Registration form

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies