html - 无法在移动 Safari/Chrome 上为 SELECT OPTION 设置 CSS 样式

Question

我只希望option 文本为大写。

在移动设备上使用 Chrome 或 Safari，转到:http://jsfiddle.net/justincook/SAm7Q/

我尝试了以下但没有成功:

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

似乎 iOS 不允许为 select option 设置任何样式，有什么办法吗？ Android 也有这种行为吗？

Answer 1

我刚刚在 Android 版 Chrome 上进行了测试，所有内容都是大写的，但是，普通的 Android 浏览器将选项显示为小写。

你可以使用 Javascript 来转换字符，而不是依赖 CSS，合并这样的东西应该适用于所有移动平台:

var option = document.getElementsByTagName('option');
option.text = option.text.toUpperCase();