Question

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

<select>
    ...
</select>

我试图用css来大写其选项：

select{
    text-transform: capitalize;
}

我也加入了我的CSS：

select option{
    text-transform: capitalize;
}

大写可以在Firefox和Chrome等桌面网络浏览器中使用，但不能在像dolphin这样的移动网络浏览器中使用，也可以在android webview中使用。如何使其在移动Web浏览器中运行？

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

在JQuery Mobile中大写选项

1 个答案: