CODEWITHSUNDEEP
cssgoogle-chromecapitalize
JustBeingHelpful
JustBeingHelpful

Reputation: 18980

select tag in Google Chrome shows lowercase options

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

Upvotes: 4

Views: 2423

Answers (2)

Christian
Christian

Reputation: 552

This looks like it's your selector for what you're trying to change:

 .web_form div.form_field select

Try making it more specific (or less specific)

Like:

 .web_form div.form_field select option

Upvotes: 0

wesbos
wesbos

Reputation: 26317

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/

Upvotes: 3

Related Questions