Styling Checkboxes and Radio Buttons

With earlier browsers (IE9 included) styling these form field types was not all that easy. The newer CSS commands that modern browsers support open up a range of possibilities. The key to how to handle styling of these is to consider the associated label as a part of the field to be styled. This opens up a number of possibilities. In each case the first thing we need to do is to hide the actual input field itself.

With the input field hidden we can add our replacement into the front of the label. A simple way to do this is to add an empty span tag at the front of the label which we can then style from our CSS. We can then substitute background images into the span to give our radio buttons and checkboxes whatever appearances we like to indicate whether they are checked or unchecked.

Another alternative is to simply leave out the actual form field completely and simply style the label so that it indicates whether the option is checked or not.

One interesting alternative is to use a relatively new feature of CSS that allows us to add small pieces of content before or after the label. As there are all sorts of symbols that can be inserted into your page via entity codes (or the CSS equivalent) we can easily set up a text only example where the selected label appears both in a different colour and has an appropriate character added to the front to indicate that it is checked.

input[type=radio] {display:none;}
input[type=radio]:checked + label {color:#900;}
label:before {content: '_ ';}
input[type=radio]:checked + label:before {content: '\2713 ';}

Here is how the radio buttons look when styled this way:


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow