我试图对选择进行风格化,但我在FF和IE8上遇到了问题。 右边的默认箭头不想消失!!
我做了一个小提琴:
以下是代码:
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, 弗朗西斯
答案 0 :(得分:0)
你可以做的是设置-moz-appearance: window
,这将擦除所有默认样式。然后,您可以将select包装在一个容器中(您已经拥有),并将容器设置为类似于您的选择框,然后在容器的整个高度和宽度内进行选择,以便单击它仍然会触发该操作。