Question

In Google Chrome, I have a select tag with countries which render with lowercase first letters when viewed in the browser. In all other browsers, they have upper case letters. The option labels are rendered with lowercase first letters, but we have styling to capitalize them. Could it be that Google Chrome doesn’t know how to apply this style? I saw the issue on the Chromium issues list for a select in an iFrame; however, this select tag is not in an iFrame.

CSS when viewing from Mozilla:

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

CSS when viewing from 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 (from any browser):

<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>

……. continued

Answer 1

This seems to be an outstanding bug in Google Chrome. You are better off parsing the strings either with javascript or server side.

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 Reproduced: http://jsfiddle.net/wesbos/SgS85/