How to change the default style of the html radio button and checkbox
Posted on February 29, 2016
While you can design most of the elements like textboxes, button and links on an HTML page, styling checkboxes and radio buttons are not easy. Here is a small hack to style radio button and checkboxes. There might be many ways, but this is just one cool way.
The HTML markup for the radio box and the check box:
In the above markup, the label the input is within the label tag so that clicking on the radio will also toggle the select-unselect. For this trick to work you need the Glyphicon package that ships by default with bootstrap. If you are not using bootstrap, please get glyphicons for yout site here. The default radio button and checkboxes are replaced by glyphycons. Add the following css snippet to your stylesheet.
Now you have a beautifully styled radio button and check box. You can play around with the colours to match your design and also use fontawesome instead of glyphicons. I have been playing around with Codepen a bit lately. So I thought I’ll sample this on a pen: