{justCSS}

Just plain CSS

est. 2015

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 …

<form action="">
    <fieldset>
        <legend>Radio buttons</legend>
        <p><input type="radio" name="radio-set" id="radio-1" value="Normal Radio" checked= /><label for="radio-1">Normal Radio 1</label></p>
        <p><input type="radio" name="radio-set" id="radio-2" value="Normal Radio" /><label for="radio-2">Normal Radio 2</label></p>
        <p><input type="radio" name="radio-set" id="radio-3" value="Normal Radio" /><label for="radio-3">Normal Radio 3</label></p>
        <p><input type="radio" name="radio-set" id="radio-4" value="Normal Radio" disabled= /><label for="radio-4">Disabled Radio</label></p>
    </fieldset>
</form>

Radio buttons

See the Pen Form with unstyled radio buttons and checkboxes by Jacques Mostert (@jayx) on CodePen.14523

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 …

body{
  font-family: Arial, Helvetica, sans-serif;
}
/* Set up the label basics */
label{
  display: inline-block;
  font-size: 1em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
/* Hide the radio buttons */
input[type="radio"]{
  display: none;
}

… 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 …

input[type="radio"] + label{
  padding: 0 0 0 1.5em;
  position: relative;
}
input[type="radio"] + label::before{
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
  content: "";
  display: inline-block;
  height: 0.5em;
  left: 0.25em;
  position: absolute;
  top: 0.75em;
  width: 0.5em;
}

… 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 …

input[type="radio"]:checked + label:before{
  background: #0b79bf;
}
input[type="radio"]:disabled + label{
  color: #999;
}
input[type="radio"]:disabled + label:before{
  background: #999;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #999;
}

… and that’s all there is to it:

See the Pen Form with styled radio buttons by Jacques Mostert (@jayx) on CodePen.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *