以下代码看起来不错,几乎可以工作
select{
width:218px;
background-color: #000;
border:none;
outline: none;
color:#333;
-webkit-appearance:none;
height:24px;
border-radius: 0;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.selcet_wrapper{
background:url(../image/contact_arrow.png) no-repeat 96% 0;
background-size: 21px 24px;
overflow: hidden;
-webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
width:21px;
height:24px;
}
<div class="selcet_wrapper">
<select name="how" id="how">
<option selected="selected" value="audi">What is your enquiry regarding?</option>
<option value="volvo">one</option>
<option value="saab">two</option>
<option value="vw">three</option>
</select>
</div>
当我单击 bg 图像时,下拉菜单不显示,我知道这是因为它不包含在 select 元素中,有没有办法解决这个问题?