This seems like an obvious statement; styling should be done with CSS. But unfortunately in the case of checkboxes, there's basically no support for directly styling the checkbox.

Because of that, I've seen several JavaScript implementations to change between displaying an unchecked box and a checked box based on state in order to fake a styled checkbox.

But let's not go so quickly to JS to solve a fundamentally styling problem! It can be done with just CSS, we just need to shift our thinking a little.

The goals

1. Style the checkbox
2. Style the label
3. Require no additional DOM nodes or configuration (including icons/images)
4. Require 0 JavaScript

The results

The strategy

Since we cannot style the checkbox input directly with something like checkbox-style: awesome;, we'll need to take a different approach:

1. Hide the actual checkbox input
2. Show a styled element that looks like an empty checkbox when the input is unchecked
3. Show a styled element that looks like a checked checkbox when the input is checked

How to get there

The CSS selectors used

1. Type selector type - selects all elements of the given type (e.g. input will select all <input ... /> nodes)

2. Attribute selector [attribute="value"] - selects an element with attribute where its value is exactly value

3. Psuedo-class :checked - selects checkbox/radio input types or options in a select that are selected/checked/on/active

4. Psuedo-element ::before - styleable element that doesn't actually exist in the DOM; considered the first child of the selected element

5. Universal selector * - selects anything/everything

6. Child combinator > - combines two selectors; narrowing the selection on the right-hand side to only those elements that are direct descendants of elements selected by the left-hand side.

7. Adjacent sibling combinator + - combines two selectors; narrowing the selection on the right-hand side to only those elements that are the siblings immediately after the elements on the left-hand side

Important CSS styles used

1. content - used in the ::before psuedo-element to set its content

2. display - specifically none to hide elements and inline-block to make our otherwise inline checkbox able to have a consistent width and height

3. width / height - does what you think: sets width and height of the element

4. color - sets the color of the text

5. text-align / vertical-align - used for adjusting the position of our check/checkbox to its label

6. border styles - How we'll form and color the checkbox

7. background - sets the background color (used to fill in the checkbox when it is checked)

Starting out: the HTML

Let's set up our checkbox as a child of its label element with a sibling of a span of the label text:

<label>
  <input type="checkbox" name="key" value="value" />
  <span>I am a checkbox</span>
</label>

This structure allows clicking on the label text (I am a checkbox) to toggle the checkbox without needing for or unique id attributes. Placing the text in a span directly after the input will allow us to select it in CSS.

First step: hide the unstyleable checkbox

Going back to our strategy: since we can't do anything with the native checkbox, we'll have to hide it and do our own thing.

label > input[type="checkbox"