//html
<p>
<select>
<option value="volvo">aabb</option>
</select>
</p>
//css
p:nth-child(3){
border:1px solid #868686;
position: relative;
&:after{
content: "";
width: .1867rem;
height: 0.16rem;
//倒三角这里用一张图片
background: url("../../../static/icon/Path7@2x.png") no-repeat center;
position: absolute;
right: 10%;
top: 40%;
background-size: contain;
}
}
select{
border: none;
//清除select聚焦时候的边框颜色
outline: none;
//隐藏select的下拉图标
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
width: 1.573rem;
height: .53rem;
box-sizing: border-box;
padding-left: .1rem;
color:#868686;
}
效果图为:
思路是这样的:
①去除select的默认样式
②为p元素添加一个伪类,伪类的背景为一个倒三角图片