SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The best way to style radio buttons

    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


    Code HTML4Strict:
    <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
    The more you learn.... the more you learn there is more to learn.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

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

    Something like this:

    Code:
    <!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. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul

    A couple of tweaks but this is exactly the structure I need... thanks Paul working great now
    The more you learn.... the more you learn there is more to learn.

  4. #4
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code HTML4Strict:
    <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>
    Code CSS:
    .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
    The more you learn.... the more you learn there is more to learn.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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/st...isited/legend/
    http://www.tyssendesign.com.au/artic...ends-of-style/
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,675
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    The more you learn.... the more you learn there is more to learn.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You're welcome .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •