Does text-transform: Capitalize work for <option> elements, and if so in which browsers?

Question

I have a <select> element within which I would like to Capitalize the text displayed in each <option> tag.

For instance, I would like the 2 values here to be Bar and Baz (not bar and baz)

<style>     option { text-transform: Capitalize; } </style>  <select name="foo">     <option value="bar">bar</option>     <option value="baz">baz</option> </select> 

This does not appear to work in my Chrome (14.0.835.202) but does work in my Firefox (8.0) and IE 8.

Edit: Added <style> tag for clarity

Answer 1

As others have mentioned, this currently a bug in Chrome. The code below is the proper way to do what you're asking:

select option {text-transform:capitalize} 

Here's a working fiddle to demonstrate (view in something other than Chrome)

Additional Information:

I think you'll also find that the above method does not work in Safari as well. If you want a cross-browser solution, JavaScript will be your only option.

If you're open to it, here's a simple jQuery example:

$("option").each(function() {     var $this = $(this);     $this.text($this.text().charAt(0).toUpperCase() + $this.text().slice(1)); }); 

And a working fiddle.

** UPDATE **

This question was originally answered in 2011. The above-referenced bug has since been squashed, and the CSS below is enough to capitalize each option in all browsers.

select, select option {text-transform:capitalize} 

Answer 2

This will work in all browsers:

select {text-transform:capitalize}