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

[deronsizemore]

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?:

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

[imouto]

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

[deronsizemore]

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

[Paul O'B]

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.

[deronsizemore]

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

[deronsizemore]

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:

		

                
                
<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.

[Paul O'B]

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

[deronsizemore]

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?

[Paul O'B]

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.

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

[deronsizemore]

Ahhhh, I see. Makes sense.

Thanks a bunch for the help and even more so for the star rating! It's great!