H5中修改select的默认样式
2019-12-19 本文已影响0人
依然_8deb
<div class="select_wrap">
<select>
<option value ="室内布线">室内布线</option>
<option value ="隐形光纤">隐形光纤</option>
<option value="其他终端">其他终端</option>
</select>
</div>
样式如下:
.select_wrap{
/* 用div的样式代替select的样式 */
display: inline-block;
height: 1rem;
position: relative;
}
.select_wrap select{
/* //清除select的边框样式 */
border: none;
/* //清除select聚焦时候的边框颜色 */
outline: none;
/* //将select的宽高等于div的宽高 */
display: inline-block;
height: 1rem;
line-height: 1rem;
/* //隐藏select的下拉图标 */
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
-webkit-appearance: none;
-moz-appearance: none;
background: transparent;
font-size: .4rem;
}
/* //使用伪类给select添加自己想用的图标 */
.select_wrap:after{
content: "";
width: 0.35rem;
height: 0.35rem;
background: url(../images/down.png) no-repeat center;
background-size: contain;
font-size: 0;
/* //通过定位将图标放在合适的位置 */
position: absolute;
right: 0;
top: 40%;
/* //给自定义的图标实现点击下来功能 */
pointer-events: none;
}