Styling Form Radio Buttons

Last week's post about styling form checkboxes received a lot of interest—and a common request: Can you do the same type of thing with radio buttons? I'm happy to say that this is indeed the case. Curiosity piqued? Let's explore this further, good reader.

Before you get too deep into this article, it should be noted that we're going to be using the same basic technique as in last week's article about checkboxes. If you haven't read that, I recommend doing so, as I'm going to skip over a lot of the stuff covered there. You could consider this post as a companion-piece, if you will.

We're going to start off with a very basic form with a three-button radio group. It's important to remember that this technique requires a label, so each input must have an id, and a label with a "for" property that matches that id.

html
<form id="radio-demo">
  <input type="radio" name="radio-group" id="first-choice" value="First Choice" />
  <label for="first-choice">First Choice</label>
  <br/>
  <input type="radio" name="radio-group" id="second-choice" value="Second Choice" />
  <label for="second-choice">Second Choice</label>
  <br/>
  <input type="radio" name="radio-group" id="third-choice" value="Third Choice" />
  <label for="third-choice">Third Choice</label>
</form>

See the Pen f460a7e4b350f128457672df2bc92fa7 by Jesse Couch (@designcouch) on CodePen.

Nothing too complex there. Make sure to remember those line breaks though, as radio buttons are inline by default.

Now here's our CSS. We're using several CSS3 techniques that require vendor prefixes for maximum compatibility, so don't skip them!

css
#radio-demo {
  max-width:400px;
  margin:94px auto 0 auto;
}

#radio-demo input[type="radio"] {
  position: absolute;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;
  -o-opacity: 0;
}

#radio-demo input[type="radio"] + label {
  position: relative;
  padding: 0 0 0 25px;
  font-size: 16px;
  line-height: 25px;
  margin:0 0 10px 0;
}

#radio-demo input[type="radio"] + label:before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  height: 14px;
  width: 14px;
  background: white;
  border: 1px solid gray;
  box-shadow: inset 0px 0px 0px 2px white;
  -webkit-box-shadow: inset 0px 0px 0px 2px white;
  -moz-box-shadow: inset 0px 0px 0px 2px white;
  -o-box-shadow: inset 0px 0px 0px 2px white;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
}

#radio-demo input[type="radio"]:checked + label:before {
  background: #ef8700;
}

See the Pen f460a7e4b350f128457672df2bc92fa7 by Jesse Couch (@designcouch) on CodePen.

And that, as they say, is that. Again, if you don't quite understand this technique, feel free to read my post from last week, or ask questions in the comments area below.

demo

See the Pen f460a7e4b350f128457672df2bc92fa7 by Jesse Couch (@designcouch) on CodePen.

Did I help you out?

Read More

←  Dead Simple Pure CSS Loading Spinner Styling Form Checkboxes  →

There are 18 comments. Add Yours.

A Note from the Moderator

Thanks for taking the time to comment! I'll respond as quickly as possible if necessary. In the meantime, please keep the following in mind:

  • All comments must be appropriate. I'll delete 'em if you get nasty.
  • Please allow for response time. I'm here as much as possible, but can't always respond as quickly as some would like.
  • Please stay on topic.
  • I don't work for free—if you want custom work, feel free to get in touch and I'll write up a quote!
  1. Bryan G

    Bryan G

    Sep 09, 2013

    Love this design, but is there any way to update the style so when the radio button is selected (after tabbing to the element) there is an outline around the button?

    Reply to Bryan

    1. Jesse

      Jesse

      Sep 10, 2013

      I would imagine that using the :focus state into your css would probably be the way to go to accomplish this. I'll look into it at some point soon!

    2. Robbin

      Robbin

      Jul 12, 2014

      I don't know how to make them outline (select). But you can use the keyboard up and down-arrows to switch between the radio buttons.
      Let me know if there was a "solve" on this one!

  2. Bryan G

    Bryan G

    Sep 10, 2013

    Great, thanks! I tried myself a few different things on the focus but was unable to get it to work, especially if there is no label and just two radio buttons.

    Reply to Bryan

    1. Jesse

      Jesse

      Sep 12, 2013

      On closer inspection, the entire group of radio buttons is treated as one form element; therefor styling each select on :focus isn't possible using just CSS. Sorry!

  3. Andreas

    Andreas

    Nov 12, 2013

    Thank you so much!

    Reply to Andreas

    1. Jesse

      Jesse

      Nov 13, 2013

      Not a problem, Andreas. Glad this helped you out!

  4. Ramya Jetti

    Ramya Jetti

    Dec 04, 2013

    Its really good tut

    Reply to Ramya

    1. Jesse

      Jesse

      Dec 04, 2013

      Thanks Ramya! Very glad you found it useful.

  5. Jeff R

    Jeff R

    Dec 17, 2013

    Slight problem in latest version of firefox. The actual radiobutton is overlapping the label, have tried padding out the label in css but it moves the radiobutton as well. In the interrium am throwing in some spaces in the actual label text.

    Reply to Jeff

    1. Jesse

      Jesse

      Dec 17, 2013

      Thanks for the feedback, Jeff - I'm not actually seeing this issue in any version of Firefox. A few things:

      1. Make sure that your radio button itself (not the label) has position:absolute;

      This removes it from the actual flow of the page, and allows the label to be positioned without interference from the radio button.

      2. If this doesn't remedy your issue, then make sure that you assign positioning to both the label and the radio button (absolute for the radio, as discussed above, and relative for the label). Then add a z-index to both; the z-index for the radio should be less than that of the label. This will put the radio behind the label and mitigate any overlap issues. Hope this helps!

  6. wembley

    wembley

    Jul 01, 2014

    Thanks for this great tutorial!

    Reply to wembley

    1. Jesse

      Jesse

      Jul 01, 2014

      You are quite welcome, Wembley.

  7. New Designer

    New Designer

    Jul 08, 2014

    Thank you for these share but i have a problem.i dont need any label in my form, i just need radio buttons. But i didnt delete the label codes from css. Help me, please!

    Reply to New

    1. Jesse

      Jesse

      Jul 09, 2014

      Hey New - eliminating the label in this case would completely eliminate the custom styling; the label is what what we are styling to begin with. The actual input is hidden completely, and used only to toggle the active state. This is because clicking on an input's label activates that input the same as clicking on the input itself.

      I hope this is of some use to you - if you would like more specific advice on this, a little more detail on your struggle would be necessary. Happy coding!

    2. Jesse

      Jesse

      Jul 13, 2014

      I fail to see how that accomplishes what New was requesting, Robbin. You're still using labels (nothing wrong with that; it simply is not the solution that New was seeking).

  8. Robbin

    Robbin

    Jul 12, 2014

    Hi again,

    i think i solved this: http://jsfiddle.net/h5LQs/

    /R

    Reply to Robbin

  9. Esteban

    Esteban

    May 30, 2017

    Hi!

    Thanks for this post, it was very helpful for me!

    I was looking for something very simple and didn't want to add svgs and extra tags to my html to achieve it, and you reminded me of the :before power!

    I was able to achieve exactly what I wanted; something simple yet pretty

    Reply to Esteban