Heim > Web-Frontend > CSS-Tutorial > Beispiel für eine CSS-Änderung des Standardstils der Dropdown-Listenauswahl

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

小云云
Freigeben: 2018-02-28 11:08:36
Original
4140 Leute haben es durchsucht

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;
        }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage