我正在尝试对一个select进行样式化,但在FF和IE8上遇到了问题。右边的默认箭头不想消失!!
我做了一把小提琴:
http://jsfiddle.net/wa718rv8/
这是代码:
HTML:
<div class="styled-select">
<select name="yearpicker" id="yearpicker"></select>
</div>
CSS:
body {
background: red
}
.styled-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 0.5px;
text-overflow: '';
margin-left: 10px;
margin-top: 30px;
width: 215px;
height: 39px;
padding-left:10px;
line-height: 1;
border: 0;
border-radius: 0;
color:#B4D234;
font-size: 20px;
overflow: hidden;
background: transparent;
background: url('http://www.francescoceccarelli.net/select_arrow.png') no-repeat right #fff;
}
select::-ms-expand {
display: none;
}
和JS:
for (i = new Date().getFullYear(); i > 2000; i--)
{
$('#yearpicker').append($('<option />').val(i).html("Year " + i));
}
你能给我一些建议吗?
Thx,Francesco
您可以设置-moz-appearance: window
,它将擦除所有默认样式。然后,您可以将所选内容包装在一个容器中(您已经有了),并将容器设置为类似于您的选择框的样式,然后在容器的整个高度和宽度内进行选择,这样单击它仍然会触发操作。
JSFIDDLE