The best way to style radio buttons

HTML & CSS
1

Hi all

I’ve been working on a review form for the past week or so and decided a rating system would be a good idea. I tried to style the radio buttons and can’t seem to get my head around what I need to do.

this is what i want:

here is what I have

<p>*Leave your overall rating</p>
		<label for="rating">1</label>
		<input name="rating" type="radio" value="1" checked="checked">
		<label for="rating">2</label>
		<input name="rating" type="radio" value="2">
		<label for="rating">3</label>
		<input name="rating" type="radio" value="3">
		<label for="rating4">4</label>
		<input name="rating" type="radio" value="4">
		<label for="rating5">5</label>
		<input name="rating" type="radio" value="5">
		<label for="rating6">6</label>
		<input name="rating" type="radio" value="6">
		<label for="rating7">7</label>
		<input name="rating" type="radio" value="7">
		<label for="rating8">8</label>
		<input name="rating" type="radio" value="8">
		<label for="rating9">9</label>
		<input name="rating" type="radio" value="9">
		<label for="rating10">10</label>
		<input name="rating" type="radio" value="10">

How do I get the numbers on top?

I’ve tried a couple of CSS rules but nothing seems position them, any suggestions on the best way to style/build this? and keeping to W3C guidelines.

Thanks :cool:

2

Hi,

You’ll need to add an extra wrapper to keep each pair together.

Something like this:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.rate span{
    float:left;
    width:26px;
    text-align:center;
    font-size:93&#37;
}
.rate label{display:block;}

</style>
</head>
<body>
<form name="form1" method="post" action="">
    <fieldset class="rate">
    <legend>Rating System</legend>
    <span><label for="rating">1</label>
    <input name="rating" type="radio" value="1" checked="checked"></span>
        <span><label for="rating">2</label>
    <input name="rating" type="radio" value="2"></span>
        <span><label for="rating">3</label>
    <input name="rating" type="radio" value="3"></span>
        <span><label for="rating4">4</label>
    <input name="rating" type="radio" value="4"></span>
        <span><label for="rating5">5</label>
    <input name="rating" type="radio" value="5"></span>
        <span><label for="rating6">6</label>
    <input name="rating" type="radio" value="6"></span>
        <span><label for="rating7">7</label>
    <input name="rating" type="radio" value="7"></span>
        <span><label for="rating8">8</label>
    <input name="rating" type="radio" value="8"></span>
        <span><label for="rating9">9</label>
    <input name="rating" type="radio" value="9"></span>
        <span><label for="rating10">10</label>
    <input name="rating" type="radio" value="10"></span>
    </fieldset>
</form>
</body>
</html>
3

:slight_smile: Cheers Paul

A couple of tweaks but this is exactly the structure I need… thanks Paul working great now :cool:

4

One little problem. How do I get the legend to sit along side the radio buttons like in picture 1? I’ve tried floating:left; clear:left; Nothing seems to work?

If I replace the legend with a span.sum_class, it works but doesn’t validate… here is what I have:

<fieldset class="rate">
    	<legend>*Your overall rating</legend>

		<span><label for="rating1" class="title">1</label>
		<input name="rating" type="radio" value="1" id="rating1"></span>
		<span><label for="rating2">2</label>
		<input name="rating" type="radio" value="2" id="rating2"></span>

.rate span, .rate legend {
    float:left;
    width:38px;
    text-align:center;
    font-size:93&#37;
}
.rate legend {width:186px;margin-bottom:10px;text-align:left; font-weight:bold; font-size:11px; }
.rate label {display:block;margin-bottom:10px;text-align:center;}

Thanks :slight_smile:

5

The legend element is extremely hard to style :). I have to run to work but take a look at these links. You basically use another element
http://www.456bereastreet.com/lab/styling-form-controls-revisited/legend/

6

Ok Cheers Ryan, I was looking at these early. I think I’ll just remove the fieldset and legend altogether, else I’ll loose legend from the work-flow and need to add all kinds of absolute positioning to the radio buttons to get things lined up, seems like a lot of extra code for what I’m after.

Thanks again Guys :cool:

7

You’re welcome :).