Radio Button Replacement Technique

Sometimes radio buttons do not work with the layout of your site.  Perhaps the visitor needs to select an icon.  A radio button next to each icon does not look so great.

With a little CSS we can get something that looks much nicer.

Notice that the radio buttons are gone and when the user clicks a shape a border is drawn around the image.  This is achieved with the following HTML code:

<form method="post" action="">
	<div>Choose a shape:</div>
	<input type="radio" name="shape" value="square" id="square"/>
    <label for="square">
    	<img src="square.png" alt="square"/>
    </label>
    <input type="radio" name="shape" value="circle" id="circle"/>
    <label for="circle">
    	<img src="circle.png" alt="circle"/>
    </label>
    <input type="radio" name="shape" value="triangle" id="triangle"/>
    <label for="triangle">
    	<img src="triangle.png" alt="triangle"/>
    </label>
    <br/>
    <input type="submit" name="action" value="Choose Shape"/>
</form>

This HTML code uses an image inside of the label. With some CSS we will hide the radio buttons and draw a border around the image corresponding to the selected radio button.

/*Hide the radio buttons*/
[type='radio']{
		display: none;
}
/*Draw a plain border around the image so that
it does not move when selected */
label img{
	border: 3px solid white;
}
/*Draw a colored border around the image when the radio button 
adjacent to the label it is in is checked. */
[type='radio']:checked + label img{
	border: 3px solid #C63;
}

Leave a Reply