文本转换:大写是否为<option>元素工作,如果是,在哪些浏览器中工作？

Question

我有一个<select>元素,我想在其中大写每个<option>标签中显示的文本.

例如,我想这里的2个值是Bar和Baz(不是bar和baz)

<style>
    option { text-transform: Capitalize; }
</style>

<select name="foo">
    <option value="bar">bar</option>
    <option value="baz">baz</option>
</select>

这似乎不适用于我的Chrome(14.0.835.202),但可以在我的Firefox(8.0)和IE 8中使用.

编辑:<style>为清晰起见添加了标记

Answer 1

正如其他人所提到的,这是目前Chrome中的一个错误.下面的代码是你正在做的事情的正确方法:

select option {text-transform:capitalize}

这是一个工作小提琴演示(查看Chrome以外的东西)

附加信息:

我想你也会发现上面的方法在Safari中也不起作用.如果您需要跨浏览器解决方案,JavaScript将是您唯一的选择.

如果你对它开放,这是一个简单的jQuery示例:

$("option").each(function() {
    var $this = $(this);
    $this.text($this.text().charAt(0).toUpperCase() + $this.text().slice(1));
});

还有一个工作小提琴.

**更新**

这个问题最初是在2011年回答的.上面提到的bug已被压扁,下面的CSS足以将所有浏览器中的每个选项都大写.

select {text-transform:capitalize}

Answer 2

这适用于所有浏览器:

select {text-transform:capitalize}