Example of css modifying the default style of drop-down list select-CSS Tutorial-php.cn

Example of css modifying the default style of drop-down list select

小云云

Release： 2018-02-28 11:08:36

Original

4103 people have browsed it

Some default styles of select are difficult for us to modify, such as icon replacement. Next, let’s talk about how to modify these default styles. I hope this article can help everyone.

The purpose of adding parent element p to select is to cover the select style with p's style.

css code:

        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;
        }

Copy after login

Some of the default styles of select are difficult for us to modify, such as icon replacement. Next, let’s talk about how to modify these default styles: HTML code:

Related recommendations:

Methods to modify radio, checkbox, and select default styles_html/css_WEB-ITnose

The above is the detailed content of Example of css modifying the default style of drop-down list select. For more information, please follow other related articles on the PHP Chinese website!