If you're sure you want check boxes and not radio buttons
Check boxes are generally square and several can be checked, radio buttons are circular but only one out of a group can be selected
I've written a little bit of CSS based off this (checkboxfour) but I've changed it slightly to make it fit with what you've asked for.
.customcb {
width: 17px;
height: 17px;
margin: 2px 0 2px 0;
background: #ddd;
border-radius: 100%;
position: relative;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.customcb label.inner {
display: block;
width: 12.75px;
height: 12.75px;
border-radius: 100px;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
-ms-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
position: absolute;
top: 2.125px;
left: 2.125px;
z-index: 1;
background: #eee;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5)
}
.customcb label.outer {
margin-left: 25px;
}
.customcb [type=checkbox] {
display: none
}
.red.customcb input[type=checkbox]:checked+label.inner {
background: red
}
.orange.customcb input[type=checkbox]:checked+label.inner {
background: #d61
}
.green.customcb input[type=checkbox]:checked+label.inner {
background: green
}
<div class="red customcb">
<input type="checkbox" value="1" id="customcb1" name="" />
<label class="inner" for="customcb1"></label>
<label class="outer" for="customcb1">Red</label>
</div>
<div class="orange customcb">
<input type="checkbox" value="1" id="customcb2" name="" />
<label class="inner" for="customcb2"></label>
<label class="outer" for="customcb2">Amber</label>
</div>
<div class="green customcb">
<input type="checkbox" value="1" id="customcb3" name="" />
<label class="inner" for="customcb3"></label>
<label class="outer" for="customcb3">Green</label>
</div>
Also I've shown that you can use different colours by changing the class and of course adding the colour to the CSS, the last 3 sections of CSS are all about the colours. The middle one is the orange from the picture you shared.
If you follow the tutorial I've linked you'll get a good idea of what I've done and why.
I think it might be worth reading this which covers all of the input types (feel free to ignore if you know about them already)
I hope this helps.