我正在使用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/之类的插件