You are viewing...

Really cool way to Style Radio Labels

Updated on July 10, 2011 at the 14th hour
Posted under:

DISCLAIMER: Expressed views on this blog are my own.

I’ve been looking at ways to style forms in ways without Javascript/jQuery and all that jizz jazz. CSS is the way to go! The goal here is to create button like radio labels, so the assumption here is that the radio circles are hidden and the only indication of a selected radio is the highlighting of the label itself. Let’s get started!


Alright let’s create one radio and one label:
<input id=”radiooooo” class=”formRadio” type=”radio”><label for=”radiooooo” class=”formRadioLabel”>My Radiooooo Label!</label>

That was simple. As of now you should be able to click on the label for which the radio will be selected. I’m only putting one as you can add as many as you want, but obviously different IDs and label attached to that ID. On to the styling:

{ display: none; }

This is obvious, we do not want to see these. You may want to set this to block for visual for whether the radio is being checked or not.

{ padding: 20px; font-size: 20px; border: 1px solid transparent; }

You should see large text. You can style this however you like.

{ background: #98E477; border-color: #000; }

A good indication it is something we can click is if we hover over it and see something buttonlike.
{ background: #98E477; }

To make sure the background sticks when user clicks on it.

{ border-color: transparent; }

When the users clicks on the label, something should happen in that instant as a form of indication of something buttonlike! This is completely optional!


For a small amount of code and very simple, I like the way it displays. The colors here are absolutely random. Very cool effect, and could be cool for showing a radio on a tablet. Customize however you like!

Any suggestions? Have your own cool pieces of code you’d like to share?
You just read "Really cool way to Style Radio Labels". Please share if you liked it!
You can read more recent posts here.