首页 » WEB前端 » 正文

CSS3自定义下拉框

yibin 2017年04月23日 WEB前端 1975 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>


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

感谢您对优美的支持!

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

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

发表评论

综合淘客版更新提示

优美淘客综合版已经更新至【V1.6】版

商品、商户详情页新增商品封面图轮播功能;

新增商户入驻功能,商家可以在线投稿申请入驻,主题配置中可以设置编辑器模式,申请投稿的分类,免审核的会员等级等。


已购买的用户可以联系我
获得最新更新包或直接在应用中心更新
需要购买的可联系我咨询购买

即日起至11月20日购买价值100元以上主题
送弹窗运营插件

查看演示购买或更新