CSS3自定义下拉框

2017年04月23日 WEB前端 1115 views 3

扫一扫用手机浏览

<html>
<head>
<meta charset="utf-8" />
<title>css3美化select</title>
<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>
</head>

<body>
        <label>
            <select>
                <option>分组1</option>
            <option>分组2</option>
            <option>分组3</option>
        </select>
    </label>
</body>
</html>


赞(3 打赏
  • 微信
  • 支付宝
  • QQ钱包

感谢您对优美的支持!

非特殊说明,本文由优美尚品主题原创或收集发布,欢迎转载

转载请注明本文地址:http://www.umhtml.com/web/36.html

发表评论