HTML5, SELECT drop -down box to the right add icon implementation code (improve user experience)

This article tells you the icon to the right side of the H5 and Select drop -down box to improve the user experience effect on the deep beautification page

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

2. Look at the structure of H5 again:

 <div ID = login-div> <div class = select-wrapper> <select ID = selector1> <option value = dispoded selectd> Please select the system: </option> <option = 1> WeChat-Apple </OP </OP </OP </OP </op Tion> <option value = 2> WeChat-Android </option> </select> <IMG SRC = OSSWEB-IMG/Arrow.png </div> <div class = select-wrapper> <select ID = Selector2> <option = disabled select> Please select channel: </option> <option value = 1> channel 1 </option> <option value = 2> channel 2 </option> <IMG SRC = OSSWEB-IMG/Arrow.png.png </div> <div class = select-wrapper> <select id = selector3> <option value = dispoded selectd> Please select the region: </option> <option value = 1> UE = 2> Regions 2 </option> </select> <IMG SRC = OSSWEB-IMG/Arrow.png </div> <div class = select-wrapper> <select ID = selector4> <option value = Disabled Selec TED> Please select the character: </option> <option value = 1> Character 1 </option> <option value = 2> character 2 </option> </select> <IMG SRC = OSSWEB-IMG/Arrow.png </div > <p ID = notice> A single account can only receive once award </p> <IMG SRC = OSSWEB-IMG/Comfire1.png </div>

3. The style part is controlled by SASS. If SASS is not available, it can be replaced with CSS. There are no special operations to be transformed, so it is easy to replace 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 {posity: related; display: Flex; justify-content: center; ali gn-items: Center; Height: Rem (50); Margin: Rem (10) Auto; Padding-Top: Rem (15); &> Select {Width: Rem (458); Height: Rem (63); 20); border: 1px solid #23282d; background: #23282d; -webkit-APPEARANCE: None: #92989F; FONT-siZe: Rem (24); Er-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-heft: Rem (174);}}

4. Analysis: Mainly the position control of the icon of the right side of the right side of the right. Utilizing the position of the attribute to control the position with possition: absolute; it is basically no problem.

The above is the HTML5 and SELECT drop -down box to the right side of the HTML5 and Select. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!