HTML5, Select drop-down box, And html5 drop-down box

HTML5, Select drop-down box, And html5 drop-down box

This article will show you how to add icons to the right of the h5 and select drop-down boxes to enhance the user experience.

1. Let's take a look at the effect first!
 

 
 

2. Now let's look at the h5 structure:

<Div id = "login-div"> <div class = "select-wrapper"> <select id = "selector1"> <option value = "" disabled selected> select System: </option> <option value = "1">-Apple </option> <option value = "2">-android </option> </select>  </div> <div class = "select-wrapper"> <select id = "selector2"> <option value = "" disabled selected> select a channel: </option> <option value = "1"> Channel 1 </option> <option value = "2"> Channel 2 </option> </select>  </div> <div class = "select-wrapper"> <select id = "selector3"> <option value = "" disabled selected> select a region: </option> <option value = "1"> region 1 </option> <option value = "2"> Region 2 </option> </select>  </div> <div class = "select-wrapper"> <select id = "selector4"> <option value = "" disabled selected> select a role: </option> <option value = "1"> role 1 </option> <option value = "2"> role 2 </option> </select>  </div> <p id = "notice"> A single account can receive only one reward </p>  </div>

3. The style part is controlled by sass, and can be changed to css if sass is not used. There is no special operation to convert, so switching to css is also simple

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

4. Resolution: The. arrow element controls the position of the icon on the right. The position: absolute attribute is used to control the position, so there is almost no problem.

Summary

The above is the implementation code of adding a graph icon to the right of the HTML5 and Select drop-down boxes introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!