我看到this answer在select
元素上呈现箭头:
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 244px;
}
http://jsfiddle.net/qhCsJ/4120/
适用于Chrome。
对于Firefox,-moz-appearance: none;
可以解决问题。
但对于IE我不知道。
答案 0 :(得分:0)
添加此项(IE 10 +我猜):
select::-ms-expand {
display: none;
}
对于IE9,使用div
包装您的选择并使用类似的内容(图像将超过原始图像):
select {
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 5px;
height: 34px;
-webkit-appearance: none;
background-position-x: 244px;
}
select::-ms-expand {
display: none;
}
div {
position:relative;
display:inline-block;
border:solid black 1px;
z-index:0
}
div select {
z-index:1;
}
div:before {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_up.png) no-repeat right #ddd;
display:block;
position:absolute;
content:'';
right:6px;
top:5px;
height:1em;
width:1em;
margin:2px;
z-index:5;
}
IE 8或之前你不能。