CSS3自定义下拉框

子轩
建站
2018-04-27
871热度
0评论

CSS样式：

<style>

label{border:solid 1px #ccc;background-color:#fff;position:relative;height:30px;width:160px;display:inline-block;}label:before{border-left:1px solid #ccc;width:30px;height:30px;display:block;content:'';position:absolute;right:0;top:0;pointer-events:none;}label:after{border:solid 8px transparent;border-top:solid 8px #585858;width:0;height:0;overflow:hidden;content:'';position:absolute;right:8px;top:11px;pointer-events:none;}label select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;width:160px;height:30px;border:0 none;}

</style>

html结构：
<label>

</select>

</label>