效果如下:
<style>
.box {
border: 1px solid #bbb;
border-radius: 1px;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
width: 300px;
background: #f3f3f3;
}
.custom-select {
position: relative;
}
.custom-select select {
width: 100%;
-webkit-border-radius: 0;
-webkit-appearance: none; /*去除下拉框默认样式*/
border: 0;
text-indent: 10px;
}
.custom-select::after {
content: "";
position: absolute;
width: 0px;
height: 0px;
top: 50%;
right: 8px;
margin-top:-4px;
border:8px solid #929497;
border-width: 8px 5px 8px;
border-color: #f60 transparent transparent transparent;
z-index: 2;
pointer-events:none;
}
.custom-select:hover {
border:1px solid #f60;
}
.custom-select select:focus {
outline:none;
/*box-shadow: 0 0 1px 3px rgba(180,222,250, 1);*/
background-color:transparent;
color: #222;
}
.custom-select option {
font-weight:normal;
}
</style>
<div class="box custom-select">
<select name="" id="">
<option value="选择1">选择1</option>
<option value="选择2">选择2</option>
<option value="选择3">选择3</option>
<option value="选择4">选择4</option>
</select>
</div>