Just plain CSS

est. 2015

Styling checkboxes – the CSS-only way (styling form fields – part 2)

In part 2 of my series of styling form fields using only CSS, we look at checkboxes. The approach and elements will be very similar to how we styled radio buttons – again we’ll be hiding the actual form element and focus on styling the label and adding some pseudo elements to achieve the desired effect …

As ever, we start with some basic markup …

<form action="">
        <p><input type="checkbox" name="checkbox-set" id="checkbox-1" value="Normal Checkbox" checked= /><label for="checkbox-1">Normal Checkbox 1</label></p>
        <p><input type="checkbox" name="checkbox-set" id="checkbox-2" value="Normal Checkbox" /><label for="checkbox-2">Normal Checkbox 2</label></p>
        <p><input type="checkbox" name="checkbox-set" id="checkbox-3" value="Normal Checkbox" required= /><label for="checkbox-3">Normal Checkbox 3</label></p>
        <p><input type="checkbox" name="checkbox-set" id="checkbox-4" value="Normal Checkbox" disabled= /><label for="checkbox-4">Disabled Checkbox</label></p>


See the Pen Form with unstyled checkboxes by Jacques Mostert (@jayx) on CodePen.14523

As per my previous, we hide the checkboxes and use the fields’ label and some pseudo elements for the actual styling …

  font-family: Arial, Helvetica, sans-serif;
/* Set up the label basics */
  display: inline-block;
  font-size: 1em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
/* Hide the checkboxes */
  display: none;

… next we set up some space for the faux checkbox

/* Set up some space for the faux checkbox */
input[type="checkbox"] + label{
  padding: 0 0 0 1.5em;
  position: relative;

… then we set up the empty checkbox container with a pseudo element …

/* Set up the empty checkbox container */
input[type="checkbox"] + label::before{
  background: #fff;
  border: 2px solid #333;
  border-radius: 20%;
  content: "";
  display: inline-block;
  height: 1em;
  left: 0;
  position: absolute;
  top: calc(0.5em - 2px);
  width: 1em;

… next we add the tick marks for selected boxes – you can use unicode characters for this ( or ), use an icon font or use another pseudo element/empty box with borders on 2 sides and transform it like I did …

/* Set up the check/tick marks */
input[type="checkbox"]:checked + label::after{
  background: transparent;
  border-bottom: 3px solid #0b79bf;
  border-left: 3px solid #0b79bf;
  content: "";
  display: inline-block;
  height: 0.4em;
  left: 0.25em;
  position: absolute;
  top: 0.5em;
  transform: rotate(-20deg) skewX(-10deg);
  width: 1em;

… and don’t forget to set up disabled styles …

/* Set up disabled styles */
input[type="checkbox"]:disabled + label{
  color: #999;
input[type="checkbox"]:disabled + label:before{
  border-color: #999;

That’s it – we’re done!

See the Pen Form with custom styled checkboxes by Jacques Mostert (@jayx) on CodePen.14523

As ever – comments are open … have your say, ask some questions, always play nice.

Leave a Reply

Your email address will not be published.