Capitalize the HTML <option> selected Attribute

Question

I am trying to Capitalize the HTML selected Attribute, but does not work !

<option value="${city}" style="text-transform: capitalize"> ${fn:toLowerCase(city)}</option>

Answer 1

As mentioned in comments on the answer suggesting the CSS text-transform method, there seems to be an inconsistency with Chrome. Scouring the web, this seems to be, at some point - a known issue. See here and here for some details. Unsure how long this has been known, perhaps even resolved at some point, but per Chrome version 43.0.2357.124 m on Windows, I can still replicate this issue - see screen cap as well

If Chrome consistency is substantial enough of an issue, you may be able to work around this with some JavaScript. Some examples may include...

jQuery - JSFiddle Example

$('option').each(function() {
    $(this).text($(this).text().replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase(); }));
});

---

Vanilla - JSFiddle Example

var ele = document.getElementsByTagName('OPTION')

for(var i = 0; i < ele.length; i += 1) {
    ele[i].text = ele[i].text.replace(/^(.)|\s(.)/g, function($1){ return $1.toUpperCase(); })
}