Question

我正在开发一个小项目，其中我陷入了困境，其中下拉列表的背景无法改变它的默认颜色。我想使用jquery mobile 1.4.5在右侧按颜色和小图像制作自定义下拉列表。请指导我/帮帮我

<div class="Own-card-payment"> 
      <select id="selectCardVals" data-native-menu="false" ></select>
     <select name="dropdown" id="selectCreditCardNums" data-native-menu="false">     </select> 
</div>

提前谢谢你 Aniruddh

Answer 1

只需添加一些CSS样式即可更改颜色。这是demo

#selectCardVals {
    background-color: #000;
}
#selectCreditCardNums {
    background-color: #0912FF; 
}

Answer 2

当你设置data-menu-native =“false”时，jQM会创建一个带有选项的弹出窗口或对话框，因此你的CSS需要定位所创建的元素而不是select元素。根据SELECT中的选项数量和页面高度，将显示弹出窗口或对话框。

创建的弹出窗口具有选择加上“-listbox”或加“-dialog”的ID，而listitem锚点具有背景颜色，因此您的CSS应如下所示：

#selectCardVals-listbox a, #selectCardVals-dialog a {
    background-color: #e29b2c;
    text-shadow: none;
    color: white;
}
#selectCreditCardNums-listbox a, #selectCreditCardNums-dialog a {
    background-color: #024DAC;
    text-shadow: none;
    color: white;
}

要在弹出窗口的右上角添加图像，您可以执行以下操作：

#selectCardVals-listbox{
    padding-top: 40px;
    background-color: #e29b2c;
    background-image: url(http://lorempixel.com/40/40/technics/1/);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: top right;
}
#selectCardVals-dialog .ui-header{
    background-image: url(http://lorempixel.com/40/40/technics/2/);
    background-repeat: no-repeat;
    background-origin: border-box;
    background-position: top right;
}

这是 DEMO

如何使用背景颜色和右侧的小下拉图像制作自定义下拉列表？

2 个答案: