首页 建站教程 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>


打赏
海报

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

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

相关推荐

css中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 206
纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 855
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 434
评论列表
yes
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
感谢您的支持