<select class="dropDown">
<option>mango</option>
<option>banana</option>
<option>pomegranate</option>
<option>papaya</option>
</select>
select.dropDown {
outline : none;
overflow : hidden;
text-indent : 0.01px;
text-overflow : '';
background : #666;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
select.dropDown::-ms-expand
display: none;
}
答案 0 :(得分:1)
如评论中所述。 IE 9及以下版本不支持appearance
属性。我在过去创造了类似的东西。基本上我所做的是在select元素的箭头顶部创建一个元素。
元素只是绝对定位,背景是静态的,与网页背景相同:
selectbox
{
position: relative;
width: 200px;
height: 200px
}
label
{
display: inline-block;
position: absolute;
right: 0;
height: 23px;
}
label:after
{
content: '';
width: 16px;
height: 23px;
position: absolute;
right: 2px;
color: #868583;
background: white;
border-left: 1px solid #868583;
padding-left: 2px;
}
label > select
{
float: right;
background: transparent;
border: 1px solid #575757;
color: #575757;
font-size: 14px;
letter-spacing: 2px;
font-family: Arial;
height: 100%;
}
如果您希望能够点击重叠元素,则可能需要在重叠元素上使用pointer-events: none;
。
我显示轮廓焦点,因此您无法看到它勾勒出原始选择框的宽度:
select::-moz-focus-inner {
border: 0;
}
select:focus
{
outline: none;
}
<强> jsFiddle 强>
这只是我做过的一个简单例子,希望你发现它很有用。
<强>更新强>
您可以在用户使用IE时使用此代码,否则您可以使用您的代码。