Take the 2-minute tour ×

Hello i am trying to create a custom checkbox for my website like the image link provided. What would be the best way to go around doing this? Many thanks.

Custom checkboxes

share|improve this question
add comment

2 Answers

up vote 9 down vote accepted

There is a CSS trick that actually works by hiding the checkbox (or radio), defining a label (which in all relevant browsers will turn the checkbox on/off) that will be the visual representation, and using the :checked and + selectors.

This is just a simple example:


<div class="foscheck">
    <input type="checkbox" id="fos1" />
    <label for="fos1"></label>


.foscheck input { display: none; }
.foscheck label { display: block; width: 20px; height: 20px; background: red; }
.foscheck input:checked + label { background: blue; }

jsFiddle Demo

Downsides: the :checked selector unfortunately does not work on IE, only from IE9. You can apply a Javascript fallback only for IE through conditional comments though.

Note: For accessibility, you should have some text describing the checkbox in the label, I just wanted to illustrate the effect.

share|improve this answer
Just wanted to note that :checked isn't supported in IE until version 9. Also, why not .foscheck input and .foscheck label instead of adding extra classes? –  Michael Mior Jun 27 '11 at 11:36
@Michael True, I was editing it into my answer already :). You are right about the class also (the label had no class), this is my bad habit with input elements :). –  kapa Jun 27 '11 at 11:38
hey, thanks for this answer. i have done this following on from your solution. js fiddle example and was wondering how i get it to show like my image on the question next to each other. thanks. –  HAWKES08 Jun 27 '11 at 14:43
@HAWKES08 Try adding display: inline-block; to the divs. –  kapa Jun 27 '11 at 14:47
thats great thanks. many thanks for your help. –  HAWKES08 Jun 27 '11 at 14:49
show 2 more comments

jQuery is your best bet, this is a checkbox plugin for example, but there are hundreds of them so something else may suit you better. Just google 'jquery custom checkbox'.

share|improve this answer
add comment

Your Answer


