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

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}

This will work in all browsers:

select {text-transform:capitalize}

You could use a small jQuery script to get it working in Chrome too:

http://jsfiddle.net/p6wbf/1/

Tags:

Html

Css