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}