Question

我正在尝试将HTML选中的属性大写，但不起作用！

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

Answer 1

您可以在<select>元素上设置它。

<select style="text-transform: capitalize">
    <option value="volvo">volvo</option>
    <option value="saab">saab</option>
    <option value="opel">opel</option>
    <option value="audi">audi</option>
</select>

Answer 2

正如在回答中提到CSS text-transform方法的评论中提到的那样，Chrome似乎存在不一致。在网上搜索，这似乎在某种程度上是一个已知的问题。有关详细信息，请参阅here和here。不知道这已知多长时间，甚至可能在某些时候得到解决，但在Windows上的Chrome版本43.0.2357.124 m，我仍然可以replicate this issue - 同时查看screen cap

如果Chrome的一致性足够严重，您可以通过一些JavaScript来解决这个问题。一些例子可能包括......

jQuery - JSFiddle Example

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

香草 - 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(); })
}

大写HTML <option>选定的属性

2 个答案: