Html text-transform: Capitalize 是否对 <option> 元素起作用，如果是，在哪些浏览器中起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8388301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Does text-transform: Capitalize work for <option> elements, and if so in which browsers?
提问by Phil Peace
I have a <select>element within which I would like to Capitalize the text displayed in each <option>tag.
我有一个<select>元素，我想在其中将每个<option>标签中显示的文本大写。
For instance, I would like the 2 values here to be Barand Baz(not barand baz)
例如，我希望这里的 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>
This does not appear to work in my Chrome (14.0.835.202) but does work in my Firefox (8.0) and IE 8.
这在我的 Chrome (14.0.835.202) 中似乎不起作用，但在我的 Firefox (8.0) 和 IE 8 中起作用。
Edit: Added <style>tag for clarity
编辑：<style>为清楚起见添加了标签
回答by James Hill
As others have mentioned, this currently a bug in Chrome. The code below is the proper way to do what you're asking:
正如其他人所提到的，这目前是 Chrome 中的一个错误。下面的代码是执行您所要求的正确方法：
select option {text-transform:capitalize}
Here's a working fiddle to demonstrate(view in something other than Chrome)
这是一个演示的工作小提琴（在 Chrome 以外的地方查看）
Additional Information:
附加信息：
I think you'll also find that the above method does not work in Safari as well. If you want a cross-browser solution, JavaScript will be your only option.
我想您还会发现上述方法在 Safari 中也不起作用。如果你想要一个跨浏览器的解决方案，JavaScript 将是你唯一的选择。
If you're open to it, here's a simple jQuery example:
如果您愿意，这里有一个简单的 jQuery 示例：
$("option").each(function() {
var $this = $(this);
$this.text($this.text().charAt(0).toUpperCase() + $this.text().slice(1));
});
And a working fiddle.
和一个工作小提琴。
** UPDATE **
** 更新 **
This question was originally answered in 2011. The above-referenced bug has since been squashed, and the CSS below is enough to capitalize each option in all browsers.
这个问题最初是在 2011 年回答的。上面提到的 bug 已经被压扁了，下面的 CSS 足以在所有浏览器中大写每个选项。
select {text-transform:capitalize}
回答by Ashwin
This will work in all browsers:
这将适用于所有浏览器：
select {text-transform:capitalize}
回答by ptriek
You could use a small jQuery script to get it working in Chrome too:
你也可以使用一个小的 jQuery 脚本让它在 Chrome 中工作：
回答by Arpit Attitudish
select option {text-transform:capitalize}
选择选项 {text-transform:capitalize}
Use Above CSS make sure your option values are not in UPPERCASES. if they are, first lower them using strtolower() in PHP and the style will work for you perfectly.
使用上述 CSS 确保您的选项值不是大写。如果是，请先在 PHP 中使用 strtolower() 降低它们，该样式将非常适合您。
