Styling Checkboxes And Radio Buttons

Until today I thought there was no way to style a checkbox or radio button without javascript. But it turns out it’s not that hard.

.sector_a + .sector_b Matches any .sector_b element immediately preceded by a sibling element .sector_a.

This is a checkbox

This is a working example:

check

This is the code you need

The css code:

input[type="checkbox"] {
  display: none;
}

label {
  display: inline-block;
  color: white;
  background-color: #666;
}

input[type="checkbox"]:checked + label {
  background-color: #4682b4;
}

The HTML code:

<input type="checkbox" id="some_checkbox">
<label for="some_checkbox">check</label>

If the + selector isn’t working for you, there are other options.

Hello, I'm Jankees van Woezik

Like this post? Follow me at @jankeesvw on Twitter