Styling the Radio Buttons

Radio Buttons are an important part of the HTML forms. They are the most appropriate element when the user needs to input a choice. So, we will discuss how we can beautify these little things with some CSS magic.

Lets get down to business, the trick is to hide the default radio buttons and displaying an image instead. Lets consider this piece of code:

<!DOCTYPE html>
<html>
<body>
<form action="" method="POST">
In Love?<br><label for="love_yes" ><input type="radio" name="rad" value="Yes" id="love_yes" /><span class="rad_img"></span>Yes</label><br>
<label for="love_no" ><input type="radio" name="rad" value="No" id="love_no"/><span class="rad_img"></span>No</label><br>
<label for="love_maybe" ><input type="radio" name="rad" value="Maybe" id="love_maybe"/><span class="rad_img"></span>Maybe!</label>
</form>
</body>
</html>

<!DOCTYPE html>

<html>

<body>

In Love?<br><label for="love_yes" ><input type="radio" name="rad" value="Yes" id="love_yes" /><span class="rad_img"></span>Yes</label><br>

<label for="love_maybe" ><input type="radio" name="rad" value="Maybe" id="love_maybe"/><span class="rad_img"></span>Maybe!</label>

</form>

</body>

</html>

Super basic stuff, this just renders two radio buttons with different values which your php code can process. Although I have used a label which serves a small advantage ahead, you can even achieve the desired effect without labels if you use the right selectors and jQuery. This is what the above renders:

DEMO

In Love?
Yes
No
Maybe!

Very ugly, I know! Lets remedy that shall we?
Add the following CSS which will do the magic.

body{
	background:black;
	color:white;
	font-family:verdana;
}
input[type="radio"]{
	display:none;
}
label{
	cursor:pointer;
}
span.rad_img{
	display:inline-block;
	vertical-align:middle;
	background:url('//codeaffair.com/custom/radio.png') no-repeat;
	background-position:0px 0px;
	min-width:15px;
	min-height:15px;
	margin-right:5px;
}
input[type="radio"]:checked + span.rad_img{
background-position:-20px 0px;
}

body{

background:black;

color:white;

font-family:verdana;

}

input[type="radio"]{

display:none;

}

label{

cursor:pointer;

}

span.rad_img{

display:inline-block;

vertical-align:middle;

background:url('//codeaffair.com/custom/radio.png') no-repeat;

background-position:0px 0px;

min-width:15px;

min-height:15px;

margin-right:5px;

}

input[type="radio"]:checked + span.rad_img{

background-position:-20px 0px;

}

Before anything, lets see what the above code does:

DEMO

In Love?
Yes
No
Maybe!

Now let me explain what we did: We hid the default radio buttons, now we added a background-image to the span.rad_img. This image is of the unselected radio button.
In the next rule we change the background-position or in layman terms we changed the image of the selected radio button. We did this by using this selector: input[type=”radio”]:checked + span.rad_img. this selects the span with a class “rad_img” which comes directly after the checked radio button. Since, I used everything inside the label I didn’t have to add any javascript handlers.

Now, if you have a different situation where you can’t use a label you can use jquery’s trigger() function or even change the selected attribute for the radio buttons. By using the same logic you can also style the checkboxes by using appropriate images.

With time I have found this technique very helpful, but if you have a better technique in any sense of the word “better” please do share!