29

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

Phil Peace
  • 733
  • 1
  • 7
  • 20
  • 1
    The title of your question mentions "text-transform: Capitalize", but the text of the question doesn't show how you're using it. Just `select option { text-transform: capitalize; }`? – ruakh Dec 05 '11 at 16:21
  • Apparently this was an ongoing bug for Chrome and has been corrected in 16 + 17, but I can't verify as I'm still on 15: http://code.google.com/p/chromium/issues/detail?id=31349 – Tarwn Dec 05 '11 at 16:22
  • 1
    Works if you style 'select' now in Chrome. – Elon Zito Mar 16 '15 at 15:03
  • This has since stopped working in FF, works in chrome http://jsfiddle.net/dtavqsh6/ – Rohan210 Sep 03 '19 at 11:43

4 Answers4

30

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}
James Hill
  • 60,353
  • 20
  • 145
  • 161
  • 3
    Works if you style 'select' now in Chrome. – Elon Zito Mar 16 '15 at 15:03
  • works best if you do on both actually: `select, select option {text-transform:capitalize}` – The Fool Feb 01 '20 at 15:05
  • 3
    select option {text-transform:capitalize} not working for firefox – code.rider Dec 21 '20 at 06:26
  • As of 2022 I'm not seeing this working in Chrome to style just the `option`. You can style the `select` but my form uses a font that looks on brand for the form elements to have caps, but the `select option` I want to be `capitalize`, yet it has no effect. Looking in the inspector shows the rule and it's not being overridden, just not supported, even with `!important`. – rtpHarry Mar 17 '22 at 11:12
23

This will work in all browsers:

select {text-transform:capitalize}
James Hill
  • 60,353
  • 20
  • 145
  • 161
Ashwin
  • 12,081
  • 22
  • 83
  • 117
  • This one is better, simple and straight forward. – Imran May 28 '13 at 10:12
  • How could you just capitalize the first word crossbrowser if there are more than one in each option? – Björn Oct 15 '13 at 11:15
  • @Marcel I answered this on another thread look for my answer here: http://stackoverflow.com/questions/15242592/angular-js-how-to-autocapitalize-an-input-field/22561169#22561169 – AlexCode Apr 30 '14 at 12:29
  • 2
    When on iphone chrome), only the selected option seems to be capitalised, others in scrollable menu stille are lowercase. – Mene Aug 19 '16 at 23:10
  • 1
    This works for the displayed/choosen value only, but when you click on the list , the other elements are not capitalized. – Mehdi Mar 26 '18 at 15:40
2

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

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

ptriek
  • 9,040
  • 5
  • 31
  • 29
1

select option {text-transform:capitalize}

Use Above CSS make sure your option values are not in UPPERCASES. if they are, first lower them using strtolower() in PHP and the style will work for you perfectly.

Arpit Attitudish
  • 22
  • 4