0

I just want the option text to be uppercase.

Using an Chrome or Safari on a mobile device, go to: http://jsfiddle.net/justincook/SAm7Q/

I've tried the following with no success:

<style>
select, select option {
    text-transform: uppercase;
    -webkit-appearance:none;
}
</style>
<select>
    <option>- select -</option>
    <option>make me caps</option>
</select>

Result

It seems iOS does not allow any styles for select option, any way around that? Does Android behave this way too?

Justin
  • 26,443
  • 16
  • 111
  • 128

1 Answers1

1

I just tested on Chrome for Android and everything is in all caps, however, the stock Android browser displays the options as lowercase.

Rather than relying on CSS, you can use Javascript to convert the characters, incorporating something like this should work on all mobile platforms:

var option = document.getElementsByTagName('option');
option.text = option.text.toUpperCase();
Dryden Long
  • 10,072
  • 2
  • 35
  • 47
  • That's nuts that Chrome is not the stock browser on Android. Thanks for the info. Still hoping there is a non-javascript solution out there. – Justin Dec 04 '13 at 20:36
  • Yeah, I was very surprised to find that out as well. I believe the difference between the two browsers (for your particular situation) is that the stock Android browser is still running WebKit, where Chrome is now running Blink. At least, I believe it's running Blink now... – Dryden Long Dec 04 '13 at 21:30
  • In the end I decided to do the tedious task of updating all my text to uppercase so no JS would be needed. – Justin Dec 06 '13 at 22:12