0

我有一个带有select元素的 JQM 页面：

<select>
    ...
</select>

我尝试使用 css 将其选项大写：

select{
    text-transform: capitalize;
}

我还在我的css中添加了：

select option{
    text-transform: capitalize;
}

大写适用于 Firefox 和 Chrome 等桌面网​​络浏览器，但不适用于 dolphin 等移动网络浏览器以及 android webview。我怎样才能让它在移动网络浏览器中工作？

4

1 回答 1

1

您是在谈论使用原生 android 显示来显示选项元素的经典选择元素吗？如果你这样做，那么你不能大写它，它使用选项文本在android原生选择外观中显示它，它不会采用css格式，

如果您正在谈论自定义 jQm 选择元素，这将解决它：http: //jsfiddle.net/Gajotres/p3SHm/

CSS：

fieldset .ui-controlgroup-controls .ui-checkbox label span span.ui-btn-text {
    text-transform: capitalize;
}

.ui-select div span span.ui-btn-text span {
    text-transform: capitalize;
}

select option{
    text-transform: capitalize;
}

编辑：

您可以做的是使用 javascript 将每个单词大写，在 pagebeforeshow 事件中使用它（或在页面显示之前更改您的文本的任何其他事件）。看看我在上面的例子，看看如何。

$('option').each(function(){
    $(this).html($(this).html().replace(/\w+/g, function(w){return w[0].toUpperCase() + w.slice(1).toLowerCase();}));
});
于 2012-12-14T10:36:32.693 回答