如何在 Jquery Mobile 选择选项中更改突出显示颜色

Posted

技术标签:

【中文标题】如何在 Jquery Mobile 选择选项中更改突出显示颜色【英文标题】:How to change highlight color in Jquery Mobile Select Option 【发布时间】:2017-04-05 20:38:19 【问题描述】:

我有这个选择选项

是否可以将突出显示颜色从skyblue更改为其他color

我正在使用jquery.mobile-1.4.5.min.js/css

注意:我也在尝试在开发者工具中进行编辑,但找不到任何可编辑的元素。

【问题讨论】:

【参考方案1】:

你不应该这样做。这是下拉菜单的默认行为。有一些方法可以做到这一点。但这些方法并不适用于所有浏览器。 最好将您的<select> 转换为<ul><li> 格式,然后为所欲为。

否则,使用 jQuery Mobile data-native-menu="false" 下拉属性:

<select id="selectID" data-native-menu="false">
  <option value="one">One</option>
  <option value="two">Two</option>
  <option value="three">Three</option>
  <option value="four">Four</option>
</select>

并使用以下 css :

 .ui-selectmenu-list .ui-btn-active 
    background-color: green !important;
    border-color: green !important;
    

【讨论】:

这是正确的答案。如果还想要悬停效果,可以在此处添加: .ui-selectmenu-list .ui-btn:hover background-color: green !important;【参考方案2】:

是的,你需要修改的类是ui-state-active

例如:

.ui-state-active 
   background: red;

【讨论】:

以上是关于如何在 Jquery Mobile 选择选项中更改突出显示颜色的主要内容,如果未能解决你的问题,请参考以下文章

在 jQuery mobile 中未选择选项卡时禁用表单输入

jQuery mobile 未在列表中显示正确的选定项目

jQuery Mobile 多选点击事件

如何更改选择 Jquery 中的默认选项

选择中的 HTML 第一个选项不是在 Jquery mobile 页面上呈现所选项目?

如何在 jQuery mobile (1.4 beta) 中更改页面?