To style checkboxes and radio buttons with CSS, first hide the default input using opacity: 0 while keeping it functional. 1. Wrap the input in a label and use absolute positioning. 2. Create a custom checkmark element styled with CSS. 3. Use :checked pseudo-class with sibling selectors to reflect checked states visually. 4. Ensure accessibility by associating labels, providing adequate click areas, and adding focus styles. 5. Test across devices for usability and consistency.

Styling checkboxes and radio buttons with CSS can be tricky because browsers apply their own default styles, and native controls aren’t fully customizable. But with a bit of HTML and CSS trickery, you can create custom checkboxes and radios that look consistent across devices and match your site’s design.

Hide the default input and build your own

The first step is to hide the browser’s default checkbox or radio button without breaking functionality. You can do this by setting opacity: 0 or using display: none, but opacity is better because it keeps the input clickable.

Here’s how:

• Wrap your <input> inside a container (like a <label>) for easier styling.
• Use position: absolute on the input so it doesn’t take up space visually.
• Create a custom "checkbox" or "radio" using a sibling element styled with CSS.

<label class="custom-checkbox">
  <input type="checkbox" />
  <span class="checkmark"></span>
  Option 1
</label>

In CSS:

.custom-checkbox input {
  position: absolute;
  opacity: 0;
}

.checkmark {
  height: 20px;
  width: 20px;
  border: 2px solid #ccc;
  display: inline-block;
  vertical-align: middle;
  position: relative;
}

This gives you a blank slate to style however you like — square boxes, circles, icons, whatever fits your UI.

Add visual feedback for checked/unchecked states

Now that the real input is hidden and your custom one is visible, you need to show when it's checked.

Use the :checked pseudo-class in CSS along with the adjacent sibling selector (+) or general sibling selector (~) to target the .checkmark when the input is checked.

Example:

input[type="checkbox"]:checked + .checkmark::after {
  content: "?";
  position: absolute;
  top: 2px;
  left: 5px;
  font-size: 16px;
}

You can also use background colors, borders, or even SVGs for more advanced visuals.

For radio buttons, structure is similar — just change the shape to a circle and adjust the inner dot on check.

Make it accessible and usable

Custom checkboxes and radios shouldn’t just look good — they need to work well too.

Here are some things to keep in mind:

• Always associate the label with the input using the for attribute if not nesting them directly.
• Make sure the click area is large enough (at least 44x44px) for touch devices.
• Add focus styles so keyboard users can navigate properly.

Example:

input:focus + .checkmark {
  outline: 2px dashed #666;
  outline-offset: 2px;
}

Also, don’t forget to test your custom inputs across different screen sizes and devices. What looks great on desktop might be hard to tap on mobile.

That’s basically it. It takes a few steps, but once you get the structure right, custom checkboxes and radios are easy to reuse and style to fit any theme.

The above is the detailed content of CSS tutorial for styling a custom checkbox and radio button. For more information, please follow other related articles on the PHP Chinese website!