Styling radio buttons - the CSS-only way (styling form fields - part 1)

Most form fields can be styled without fancy JavaScript and or JS plugins. This post is part 1 of a few posts I intend to do on the topic … all revolving around the styling of form fields - in this post I'll take you through the process of styling radio buttons using only CSS …

Let's start with some basic markup …

Radio buttons

We'll be using the labels for these inputs, not the actual inputs … that and some pseudo elements - here goes:

Let's set up the label and hide the radio buttons …

… next we'll add some space (padding) for the faux radio button and use the ::before pseudo element to create the new radio button. I used a box-shadow for the border/outer ring of the faux radio button and made it round with a 50% border-radius. We set the background to white (we'll set that again for the active state in just a bit) and use a white box-shadow to create a separation between the inner of the button and the round border around the edge …

… next we set the states - I have added a selected and disabled state. Note: you want to add the disabled state after the default and selected states; we use adjacent selectors to style the labels (and pseudo element), based on the state of the radio button …

… and that's all there is to it:

In my next post, we'll use the same approach to style checkboxes - keep watching and hit the comments section if you have questions and/or suggestions for improvements.