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

正如其他人所提到的，目前a bug in Chrome。下面的代码是你正在做的事情的正确方法：

select option {text-transform:capitalize}

此处为a working fiddle to demonstrate（以Chrome以外的其他方式查看）

其他信息：

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

如果您愿意接受它，这是一个简单的jQuery示例：

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

a working fiddle。

**更新**

这个问题最初是在2011年回答的。上面提到的错误已经被压缩，下面的CSS足以将所有浏览器中的每个选项都大写。

select {text-transform:capitalize}

Answer 2

这适用于所有浏览器：

select {text-transform:capitalize}

Answer 3

你也可以使用一个小的jQuery脚本让它在Chrome中运行：

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

Answer 4

选择选项{text-transform：capitalize}

在CSS上使用请确保您的选项值不在大写字母中。如果是这样，请首先使用PHP中的strtolower（）降低它们，然后该样式将非常适合您。

是否进行文本转换：对<option>元素进行大写操作，如果是，则在哪些浏览器中使用？</option>

4 个答案: