欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

css修改下拉列表select默认样式的实例

程序员文章站 2022-03-25 16:04:08
...

select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式,希望本文能帮助到大家。

给select添加父元素p目的是为了,用p的样式覆盖住select样式。

css代码:

        p{
            //用p的样式代替select的样式
            width: 200px;
            height: 40px;
            border-radius: 5px;
            //盒子阴影修饰作用,自己随意
            box-shadow: 0 0 5px #ccc;
            position: relative;
        }
        select{
            //清除select的边框样式
            border: none;
            //清除select聚焦时候的边框颜色
            outline: none;
            //将select的宽高等于p的宽高
            width: 100%;
            height: 40px;
            line-height: 40px;
            //隐藏select的下拉图标
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            //通过padding-left的值让文字居中
            padding-left: 60px;
        }
        //使用伪类给select添加自己想用的图标
        p:after{
            content: "";
            width: 14px;
            height: 8px;
            background: url(img/xiala.png) no-repeat center;
            //通过定位将图标放在合适的位置
            position: absolute;
            right: 20px;
            top: 45%;
            //给自定义的图标实现点击下来功能
            pointer-events: none;
        }

select的一些默认样式我们很难修改,比如图标的替换。接下来就说说如何修改这些默认样式: html代码:

相关推荐:

修改radio、checkbox、select默认样式的方法_html/css_WEB-ITnose

以上就是css修改下拉列表select默认样式的实例的详细内容,更多请关注其它相关文章!