Good idea so far, but you can – except for IE – display background-images in select-boxes with CSS.

Great tip. Think I might use this to rate and make sense of my unwieldy '(almost) definitive list of movies I have ever seen' list http://jackhynes.tumblr.com/post/30627809
Now I could spot the goodies and avoid the baddies! Quite a lot of work to get through though...

Neat trick.

Cool! I didn't know about the colour thing.
Although if you select one it shows up as black

Just remembered, I've been using the <optgroup> tag to add a separator between elements in a drop down list. For example, a list with "common" items at the top followed by all items alphabetically below. Something like this:

<select>
<option>Blue</option>
<option>Green</option>
<option>Red</option>
...
<optgroup label="&mdash;&mdash;&mdash;"></optgroup>
<option>Black</option>
<option>Blue</option>
...
</select>

That's really useful! Thank you!

When viewing the select box on the iPhone, there are no colors shown, everything is a default black color. Also, the first blank option is selected so it shows a checkmark next to nothing.
http://farm4.static.flickr.com/3040/2691976941_dc1b67b8aa_o.jpg
Since the iPhone uses checkmarks to show what is selected in a Select box, it makes using checkmarks in the actual select box a little confusing to the user. Example:
http://farm4.static.flickr.com/3118/2692801324_f5be51ffcd_o.jpg

It seems the iPhone is yet another browser / device for webmasters to worry about when it comes to usability...

Yeah, the list of browsers to test against never seems to get shorter. Now you have to throw in mobile browsers like mobile Safari or Opera mobile edition.

Very useful info Colin. Interestingly enough this doesn't happen on Windows Safari (I just tried to check Mac Safari but can't reach the Mac at Browserpool.de). Accessibility-wise the checkmark may be just asking for trouble though, as it doesn't leave the details of how to display a selection to the browser. The star Unicode symbol may be a better use-case...

as was pointed out, Firefox at least will show background images, too bad no others do

you can see an example of mine from a few years ago on http://uwhub.ca/ (click on "advanced" and then see the "file format" dropdown)

"Although if you select one it shows up as black"
That's because the one displayed there is styled by styling the <select> itself. In Firefox at least, some browsers does it differently.

"Good idea so far, but you can – except for IE – display background-images in select-boxes with CSS."

But something not working in the majority market share browser is a deal breaker. Unless you want to cut off well over half of your potential customers....

are this graphics made in visual basic guys
[Signature URL removed – Colin]

<< But something not working in the majority market share browser is a deal breaker. >>

Unless it's an enhancement rather than a requirement. Like in Michael Fagan's example above.

Here is what it looks like in Mac – Safari Version 3.1.2 (5525.20.1):
http://farm4.static.flickr.com/3199/2695826754_b7ee8102b4_o.png

Pretty much looks identical to what I see on the iPhone, including the checkmark behavior.

I'd like to argue that select boxes/ drop-down menus for poll-like RANGE of even a few items should be avoided at all costs. Bad UI by default. If you need to pick something out of a range of kind items, use radio buttons instead, arranged side by side with no gaps between buttons, and the "worst" and "best" labels flanking the group left and right. Instant one-line overview/ visual feedback!

E.g. WORST <input name="test" type="radio"
value="-3"><input name="test" type="radio"
value="-2"><input name="test" type="radio"
value="-1"><input name="test" type="radio"
value="1"><input name="test" type="radio"
value="2"><input name="test" type="radio"
value="3"> BEST

http://www.dxdec.com/wod/formstyle/index.html#theexample

The site above has some cool radio buttons that have a star shaped that gets filled in.

Colin, not bad at all. I really wish the HTML powers that be had introduced an

<input type="slide" value="10" checked="3">

control element for linear-type input ops, perhaps with optional binary precision="0" (or "true/false") argument for integer or real-number return of input slider position; an ASCII approximation of the above make-believe input code:

Here |_|_|_Î_|_|_|_|_|_|_| Eternity

> E.g. WORST <input name="test"
> type="radio" value="-3">

On the other hand, some people may consider using label-less radio buttons bad usability, as they contain too small a click area when unlabeled. http://blogoscoped.com/archive/2005-04-14-n77.html

The recent interface fashion suggests to use a dynamic scripted row of graphic stars which react on-hover, but I'm not always too happy with that, especially since it often does not differentiate between stars-that-are-editable-and-clickable vs stars-that-are-merely-displayed (take a look at the Google Groups interface, which in some situations has one row on top and one at the bottom, and you're left to guess which is editable!). Sometimes, a simple dropdown box *may* be more discoverable and easier understood – not quite sure.

Philipp, there's a semantic problem (I'd say deep-semiotic, but then I could be accused of lexicographic elitism ;-)) with stars as symbols in any progression. Could "one star" ever be equivalent to "-3" on a "-3 to +3" value scale? Could it express "0 stars"? Perhaps a "dark star" would be better here, but then the Western/ Caucasian/ Occidential by-default positive notion of "star," esp. in the context of color scales, differs most likely from (the scope of) Eastern/ Oriental meanings of same. Similar objections could be raised about labeled vs. non-labeled _discrete_ steps in a horizontal bad-to-good radio slider. And "horizontal" is the implicit equalizing value here, as any vertical setup, whether of radio buttons or menu lines in select boxes, is by default already a symbolic "Upstairs-Downstairs" arrangement. I don't have any data to back me up, --where's Jacob Nielsen[*] when he's needed?-- but I am pretty sure the horizontal range of

WORST oo•ooooooo BEST

(which is NOT the same as)

BEST ooooooo•oo WORST

choice, with but two end-labels, would come out far ahead as better ergonomic solution for polling user input, than a vertical one with labels for each choice.

[^*] http://useit.com

> there's a semantic problem (...) with stars as symbols in
> any progression.

I definitely agree with that. Does a single star taken on its own represent "better than nothing/ worth a star!" or does it represent "really bad, only one star!"? So I think if you do have such a stars interface it makes sense to use the additional label "worst" or "bad" next to your one-star icon to get the point across.

As for the vertical vs horizontal direction, interesting point to consider, too.

In the case of a single star for rating, one solution is to add the rest of the stars and show them faded.

This way the user will recognize the set of stars and see that only one is filled. The emptiness will easily be conceived as bad, while fullness will surely mean good in most cases.

Fact is that the star itself isn't a good choice either for bookmarking or rating, because it doesn't have either symbolic or iconic relations to the object or action.
If you look at the star, you will understand it's function only by it's context, and by the fact that loads of websites have used it for rating, so it's (kind of) a convention, which brings us closer to the symbol, but yet it's not an all-round convention, rather it's one specific to the vocabulary of websites.
So it required the average user to learn such vocabulary before the communication becomes intuitive.

For such reason a more effective symbol should be used in place of the star.