I am a freelance and I live in Turin (Italy). I spend my days crafting interfaces, crunching pixels, improving the users experience and producing graphic layouts for applications, interactive installations and web based project.

Using Wordpress with love RSS — 2004-2014©Andrea Pinchi — p.iva 02985820543

Before and after:

Our HTML code:

<ul>
    <li><label for="radio1">label 1</label><span></span><input type="radio" id="radio1" name="myRadio" checked="checked"/><span></span></li>
    <li><label for="radio2">label 2</label><span></span><input type="radio" id="radio2" name="myRadio" /><span></span></li>
    <li><label for="radio3">label 3</label><span></span><input type="radio" id="radio3" name="myRadio" /><span></span></li>
    <li><label for="radio4">label 4</label><span></span><input type="radio" id="radio4" name="myRadio" /><span></span></li>
</ul>

We only have to add two empty span before and after the radio button. Here is the commented CSS code (only the essential to do the trick, without the eye-candy):

span{
	position: absolute;
	right: 0;
	width: 25px;
	height: 25px;
	line-height: 25px;
	padding: 3px;
	color: #FFF;
	text-align: center;
	background: #c06f59;
}
 
span:after{
	content: "no"; /*if CSS are disbled span elements are not displayed*/
}
 
input{
	position: absolute;
	right: 0;
	margin: 0;
	width: 31px;
	height: 31px;
	/*hide the radio button*/
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
        cursor: pointer;
}
 
input[type="radio"] + span{ /*the span element that immediately follow the radio button */
	visibility: hidden; /*temporarily hide the "YES" label*/
	background: #6EB558;
}
 
input[type="radio"] + span:after{
	content: "yes"; /*if CSS are disbled span elements are not displayed*/
}
 
 
input[type="radio"]:checked + span{
	visibility: visible; /*show the "YES" label only if the radio button is checked*/
}

How to style Radio Buttons in pure CSS

Aug 2010, ,

Inspired by the clever work of Toby Pitman, I’ve invented this quick solution to style radio buttons without javascript or images

Visit the demo page

You may also like: Ribbon Effect with CSS3
CSS3 for a tribute to Holga