HTML5, sélectionnez Drop -Down Box vers le code d'implémentation d'icône ADD droit (Améliorer l'expérience utilisateur)

Cet article vous indique l'icône du côté droit du H5 et sélectionnez la boîte de drop -down pour améliorer l'effet de l'expérience utilisateur sur la page d'embellissement en profondeur

1. Ensuite, jetons un coup d'œil à l'effet d'abord!

2. Regardez à nouveau la structure de H5:

 <div id = login-div> <div class = select-wrapper> <select id = selector1> <option value = danked selectd> Veuillez sélectionner le système: </ option> <option = 1> wechat-apple </ op < / Op </ op </ op </pion> <Value = 2> weChat-android </ option> </lect> <img src = ossweb-iMg / arrow.png </div> <div class = -Wrapper> <select id = selector2> <option = Disabled Select> Veuillez sélectionner le canal: </ option> <Valeur d'option = 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 = ditedated selectd> Veuillez sélectionner la région: </opoption> <Value = 1> 1> Ue = 2> Régions 2 </ Option> </lect> <img src = ossweb-img / arrow.png </div> <div class = select-wrapper> <sélection > Veuillez sélectionner le caractère: </ option> <Valeur de l'option = 1> Caractère 1 </ Option> <Option Value = 2> Caractère 2 </opoption> </lect> <img src = ossweb-iMg / arrow.png < / div> <p id = Avis> Un seul compte ne peut recevoir qu'une seule fois </p> <img src = ossweb-iMg / comfire1.png </div>

3. La partie de style est contrôlée par Sass. Il n'y a pas d'opérations spéciales à transformer, il est donc facile de remplacer CSS

 @Function Rem ($ n) {@return $ n / $ rem * 1Rem;} # Login-div {Background: URL (../ Ossweb-iMg / Kuang1.png) 0 0 No-Repeat; % 100%; : Centre; Hauteur: REM (50); 1px solide # 23282d; : REM (41); 20); Marge-heft: rem (174);}}

4. Analyse: principalement le contrôle de position de l'icône du côté droit du côté droit de la droite. Utilisation de la position de l'attribut pour contrôler la position avec possibilité: absolue;

Ce qui précède est la boîte HTML5 et SELECT DROPT-Down à droite du HTML5 et sélectionnez. Merci beaucoup pour votre soutien pour le site Web VEVB Wulin!