SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Looking for a tutorial on how to style a <select> input with rating stars

    Here is what I'm looking for: http://www.pmob.co.uk/temp/star-rating.htm#

    Only not in an <ul>, but I need a tutorial on how to style it as a <select> if that's possible?:

    Code:
    <select name="rating">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    </select>
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  2. #2
    SitePoint Zealot imouto's Avatar
    Join Date
    Sep 2004
    Location
    Gotham
    Posts
    184
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    hmm... now I'm not completely certain, but I feel fairly certain that trying to do that would be quite hard (if not impossible) using purely CSS. I found something that uses CSS and a bit of DOMscripting if you're okay with that.

    http://old.easy-designs.net/articles/replaceSelect/

    This thread from CSS-Discuss might help further explain why this might be impossible (and also not work cross-browser):

    http://archivist.incutio.com/viewlist/css-discuss/39858

  3. #3
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by imouto View Post
    hmm... now I'm not completely certain, but I feel fairly certain that trying to do that would be quite hard (if not impossible) using purely CSS. I found something that uses CSS and a bit of DOMscripting if you're okay with that.

    http://old.easy-designs.net/articles/replaceSelect/
    Thanks for finding that. I'm not sure that will work for me though. I'm pretty stuck on using stars like in Pauls example above, but if that's not possible there is a way to use <ul>'s but I thought it was much more difficult to get the functionality of the form to work right... from your post though, <select> inputs may be even harder to style.

    Thanks
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,777
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    HI Deron,

    There's an article here that uses selects.

    http://www.unessa.net/en/hoyci/proje...i-star-rating/

    Hope that helps.

    BTW There is another article related to mine that shows how to implement the back-end code using my method which may help.

  5. #5
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI Deron,

    There's an article here that uses selects.

    http://www.unessa.net/en/hoyci/proje...i-star-rating/

    Hope that helps.

    BTW There is another article related to mine that shows how to implement the back-end code using my method which may help.
    Hey Paul, that's great! Thanks for pointing me to the tutorial that uses selects! I think that will work for what I need. With the CMS I'm using, I already have an extra module in place that tallies the ratings and keeps track of everything in the database, so I won't need the backend functionality, but all I need is just a way to style my select drop down, which I believe this will work great.

    I'm going to bookmark those other links you gave me though in case the need ever arises.

    Thanks Paul
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

  6. #6
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI Deron,

    There's an article here that uses selects.

    http://www.unessa.net/en/hoyci/proje...i-star-rating/

    Hope that helps.

    BTW There is another article related to mine that shows how to implement the back-end code using my method which may help.
    Paul, I ended up using your method instead of the <select> (thanks for your method by the way). Just a quick question. I've got this in my form where the rating stars are:

    Code:
    		
    
    Code HTML4Strict:
    <div class="formField">
    		<label for="review"><span class="requiredAst">*</span> Your Rating:</label>
    		<input name="rating" id="rating-{entry_id}" type="hidden" value="" />
    		<ul id="{entry_id}" class="rating star0">
     			<li class="one"><a href="#" title="1 Star">1</a></li>
     			<li class="two"><a href="#" title="2 Stars">2</a></li>
     			<li class="three"><a href="#" title="3 Stars">3</a></li>
     			<li class="four"><a href="#" title="4 Stars">4</a></li>
     			<li class="five"><a href="#" title="5 Stars">5</a></li>
    		</ul> 
    		</div>
    On the page, the stars show up below the label "Your Rating:" and I'd just like the stars to directly follow the label on the same line.

    What do I need to change in the CSS to make this happen? I assumed that the UL was simply floated left or something but it doesn't seem to be. Seems that it uses some absolute and relative positioning and to be honest, I'm not real experienced with it. Everything that I've tried to change, ends up breaking the roll over effect of the stars.
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

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

    You'd really just need to float your labels and the the ul would go alongside naturally. You nay have to move the hidden input as that sometimes messes the alignment up.

    In my example the ul is no positioned and only has position:relative added as a stacking context for the inner styles. The whole thing should move as a block and can be floated also if you want. Just don't remove the relative positioning.

    Here is an example with stars alongside some text.

    http://www.pmob.co.uk/temp/star-rating3.htm

  8. #8
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    Seems simple enough, but I can't get it to respond. I admit I don't have a lot of experience styling forms and knowing the quirks of how they work, so I'm guessing that's my problem?

    Here is the test page: http://www.kentuckygolfing.com/cours...alla-golf-club

    I can't get it to budge. I've floated the label left, gave it a width and that did nothing so I tried also floating the rating stars left and removing the hidden input and that also didn't budge it.

    What am I doing wrong?
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore

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

    Its not lining up alongside the label because you have left the clear:both in place in the .rating style.

    Remove the clear:both from .rating and float the rating and the label and then make sure you clear the next element.

    e.g.
    Code:
    .formField {
    padding-bottom: 10px;
    width: 310px;
    clear:both;
    }
    .rating{float:left;clear:none}
    label.reviewLabel {
    float: left;
    width: 100px;
    }

  10. #10
    Web Design Addict
    Join Date
    Mar 2004
    Posts
    2,152
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhh, I see. Makes sense.

    Thanks a bunch for the help and even more so for the star rating! It's great!
    Deron Sizemore
    ----------
    My Sites: LogoGala | Golf Ledger (coming soon)
    Twitter: Deron Sizemore


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
  •