我正在使用phonegap用elegob.js开发Windows Phone应用。当我尝试使用类似此图像的自定义选择框时。它总是显示默认的选择框,像这样

为什么不显示自定义选择框?

我的密码

HTML:

 <select class="custom-select custom-select-smaller no-border" id="lang-select">


CSS:

.custom-select {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 background: #fff;
 border: 2px solid #dfdfdf;
 color: #6b6b6b;
 height: 38px;
 font-size: 11px;
 line-height: 38px;
 padding: 0 6px;
 position: relative;
 width: 100% !important;
 display: block !important;
}
.custom-select.custom-select-smaller {
height: 34px;
line-height: 34px;
}
.custom-select.custom-select-smaller:after {
top: 14px;
}
#lang-select{
 z-index:~1000;
}

最佳答案

设置元素的样式总是很棘手且不可靠。

您可能想要添加以下样式以使其在webkit和firefox中工作

-webkit-appearance: initial;
-moz-appearance: none;
appearance: none;
text-indent: 0.01px;
text-overflow: '';


但是(据我所知)不可能使其在IE中工作。如果要获得一致的结果,请尝试将ul + li与隐藏标签一起使用。

或仅使用http://adam.co/lab/jquery/customselect/之类的插件

10-03 00:58