Can't set CSS style for SELECT OPTION on mobile Safari/Chrome

Question

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>

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

Answer 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();