Beispiel für eine CSS-Änderung des Standardstils der Dropdown-Listenauswahl

Einige Standardauswahlstile können von uns nur schwer geändert werden, z. B. das Ersetzen von Symbolen. Lassen Sie uns als Nächstes darüber sprechen, wie Sie diese Standardstile ändern können. Ich hoffe, dieser Artikel kann allen helfen.

Der Zweck des Hinzufügens des übergeordneten Elements p zur Auswahl besteht darin, den ausgewählten Stil mit dem Stil von p abzudecken.

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

Einige der Standardstile von select sind schwer zu ändern, z. B. das Ersetzen von Symbolen. Lassen Sie uns als Nächstes darüber sprechen, wie Sie diese Standardstile ändern: HTML-Code:

Verwandte Empfehlungen:

So ändern Sie Radio, Kontrollkästchen und wählen Standardstile_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonBeispiel für eine CSS-Änderung des Standardstils der Dropdown-Listenauswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!