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; } |