Wie HTML5-Dropdown-Boxen die Benutzererfahrung verbessern sollen

Dieses Mal zeige ich Ihnen, wie das Dropdown-Feld von HTML5 das Benutzererlebnis verbessern soll. Welche Vorsichtsmaßnahmen gibt es, um das Benutzererlebnis des Dropdown-Felds von HTML5 zu verbessern? . Das Folgende ist ein praktischer Fall, schauen wir uns das an.

In diesem Artikel erfahren Sie mehr über h5, das Hinzufügen von Symbolen auf der rechten Seite des Auswahl-Dropdown-Felds und die umfassende Verschönerung der Seite, um das Benutzererlebnis zu verbessern.

Dann werfen wir einen Blick darauf Erst die Wirkung!

Sehen Sie sich die Struktur von h5 an:

<div id="login-div">
                <div class="select-wrapper">
                    <select id="selector1">
                        <option value="" disabled selected>请选择系统：</option>
                        <option value="1">微信-苹果</option>
                        <option value="2">微信-安卓</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <div class="select-wrapper">
                    <select id="selector2">
                        <option value="" disabled selected>请选择渠道：</option>
                        <option value="1">渠道1</option>
                        <option value="2">渠道2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <div class="select-wrapper">
                    <select id="selector3">
                        <option value="" disabled selected>请选择大区：</option>
                        <option value="1">大区1</option>
                        <option value="2">大区2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <div class="select-wrapper">
                    <select id="selector4">
                        <option value="" disabled selected>请选择角色：</option>
                        <option value="1">角色1</option>
                        <option value="2">角色2</option>
                    </select>
                    <img src="ossweb-img/arrow.png" alt="" class="arrow" />
                </div>
                <p id="notice">单个帐号只能领取一次奖励</p>
                <img src="ossweb-img/comfire1.png" alt="" id="comfire1"/>
            </div>

Der Stilteil wird von Sass gesteuert. Wenn Sie Sass nicht kennen, können Sie ihn auch in CSS ändern. Es gibt keine spezielle Operation, die konvertiert werden muss, daher ist der Wechsel zu CSS einfach

@function REM($n){
        @return $n/$REM*1rem;
    }
 #login-div{
        background: url(../ossweb-img/kuang1.png)0 0 no-repeat;
        background-size: 100% 100%;
        width: REM(564);
        height: REM(531);
        margin-left: REM(38);
        .select-wrapper{
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: REM(50);
            margin: REM(10) auto;
            padding-top: REM(15);
            &>select{
                width: REM(458);
                height: REM(63);
                padding-left: REM(20);
                border: 1px solid #23282d;
                background: #23282d;
                -webkit-appearance: none;
                color: #92989f;
                font-size: REM(24);
                margin-top: REM(75);
                border-radius: 0;
                z-index:10;
            }
            .arrow{
                position: absolute;
                width: REM(41);
                height: REM(30);
                top: REM(65);
                right: REM(80);
                pointer-events: none;
                z-index:11;
            }
        }
        #notice{
                font-size: REM(20);
                color: #92989f;
                text-align: center;
                margin-top: REM(75);
        }
        #comfire1{
                width: REM(220);
                height: REM(78);
                margin-top: REM(20);
                margin-left: REM(174);
        }
    }

Analyse: Hauptsächlich steuert das .arrow-Element die Position des Symbols auf der rechten Seite. Verwenden Sie position: absolute;, um die Position zu steuern, und es wird im Grunde kein Problem geben.

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Vertical-Align, um Eingabeelemente und IMG-Elemente auszurichten

type="file " So bedienen Sie den Eingabefeldstil

Was sind in der HTML-Liste die Unterschiede zwischen dl(dt,dd), ul(li) und ol(li)

Wichtige Eigenschaften für IE8-Kompatibilität X-UA-kompatibel

Das obige ist der detaillierte Inhalt vonWie HTML5-Dropdown-Boxen die Benutzererfahrung verbessern sollen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!