How HTML5 drop-down boxes should improve user experience

This time I will show you how the HTML5 drop-down box should increase the user experience. What are the precautions for the HTML5 drop-down box to increase the user experience. The following is a practical case, let's take a look.

This article will tell you about h5, adding icons to the right of the select drop-down box, and in-depth beautification of the page to enhance user experience.

So let’s take a look at the effect first!

Look at the structure of h5:

<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 class="arrow lazy"  src="/static/imghwm/default1.png"  data-src="ossweb-img/arrow.png"   alt=""  />
                </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 class="arrow lazy"  src="/static/imghwm/default1.png"  data-src="ossweb-img/arrow.png"   alt=""  />
                </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 class="arrow lazy"  src="/static/imghwm/default1.png"  data-src="ossweb-img/arrow.png"   alt=""  />
                </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 class="arrow lazy"  src="/static/imghwm/default1.png"  data-src="ossweb-img/arrow.png"   alt=""  />
                </div>
                <p id="notice">单个帐号只能领取一次奖励</p>
                <img src="/static/imghwm/default1.png"  data-src="ossweb-img/comfire1.png"  class="lazy"   alt="" id="comfire1"/>
            </div>

The style part is controlled by sass. If you don’t know sass, you can also change it to css. There is no special operation that needs to be converted, so it is easy to switch to css

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

Analysis: Mainly, the .arrow element controls the position of the icon on the right. Use position: absolute; to control the position, and there will be basically no problem.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use vertical-align to align input elements and img elements

type="file" How to operate the input box style

In the HTML list, what are the differences between dl(dt,dd), ul(li), and ol(li)

Important properties for IE8 compatibilityX-UA-Compatible

The above is the detailed content of How HTML5 drop-down boxes should improve user experience. For more information, please follow other related articles on the PHP Chinese website!