选择标签在谷歌浏览器显示小写选项

Question

在Google Chrome中，我有一个选择标签，其中国家在浏览器中以小写字母呈现。在所有其他浏览器中，它们都是大写字母。选项标签是用小写字母呈现的，但是我们有样式来使它们大写。可能是谷歌浏览器不知道如何应用这种风格?我在一个iFrame中选择的铬问题列表上看到了这个问题;但是，这个选择标签不在iFrame中。

CSS从Mozilla中查看时:

.web_form div.form_field select {
  text-transform:capitalize;
}

CSS从Google Chrome浏览器查看时:

.web_form div.form_field input[type="text"], .web_form div.form_field input[type="password"], .web_form div.form_field select {
  float: right;
  width: 200px;
  border: solid 1px #7B9EBD;
  text-transform: capitalize;
}

HTML(来自任何浏览器):

<select id="fld_country" name="fld_country" class="form_field">
    <option value="">Please Choose</option>
    <option value="233" title="US" selected="selected">united states</option>
    <option value="1" title="AF">afghanistan</option>

……继续

Answer 1

这似乎是Google Chrome的一个突出bug。您最好使用javascript或服务器端解析字符串。

http://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/b54006f7a2b5fe5b

http://code.google.com/p/chromium/issues/detail?id=31349

Bug重现:http://jsfiddle.net/wesbos/SgS85/

Answer 2

这看起来像是你想要改变的选择器:

 .web_form div.form_field select 

试着让它更具体(或更不具体)

:

 .web_form div.form_field select option