我有一个< 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中工作。
解决方法
正如其他人所说,这个目前是
a bug in Chrome.下面的代码是正确的方式来做你所要求的:
select option {text-transform:capitalize}
这是a working fiddle to demonstrate(查看Chrome以外的其他内容)
附加信息:
我想你也会发现上述方法在Safari中也不起作用。如果您想要跨浏览器解决方案,JavaScript将是您唯一的选择。
如果您对此开放,以下是一个简单的jQuery示例:
$("option").each(function() { $(this).text($(this).text().charAt(0).toUpperCase() + $(this).text().slice(1)); });