首页 建站教程 WEB前端 正文

CSS3自定义下拉框

<html> <head> <meta charset="utf-8" /> <title>css3美化select</title> <style> label{border:solid 1px #ccc;background-color:#fff;posi...
<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>


打赏
海报

本文由优美主题原创或收集发布

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

相关推荐

如何在html页面中通过css隐藏元素

在平常的页面布局中,我们经常会遇到将某个模块隐藏,而实现不同的页面布局或js交互效果,尤其是在响应式布局中比较常见,下面我们整理了一些关于实现隐藏页面元素的多种方法以及各种方法不同的特点(如:是否占据...

WEB前端 2020.09.18 0 18

web前端写html页面div+css命名规范

web前端写html页面div+css命名规范

使用良好的CSS书写规范来写CSS代码,既能最大化优化前端代码,提升代码阅读体验,更重要的是为以后维护带来方便。常用的CSS命名一般由小...

WEB前端 2020.09.08 0 65

给网页增加WOW插件滚动触发css动效

随着浏览器的兼容性增强,css3动画特效运用也越来越广,通过css3动画库加js可以实现很多炫酷的效果。比如在滚动页面时会触发展示各式各样的动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。优...

WEB前端 2018.07.04 0 3664

评论列表
yes
借用一下
2018-06-15 16:01:21 回复
学习了
2018-06-15 16:00:09 回复
很好,简洁大方
2018-06-15 15:38:56 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持