HTML5, Selecione a caixa de suspensão -para a direita Adicionar código de implementação do ícone (melhorar a experiência do usuário)

Este artigo informa o ícone para o lado direito do H5 e selecionar caixa de suspensão para melhorar o efeito da experiência do usuário na página de embelezamento profundo

1. Então vamos dar uma olhada no efeito primeiro!

2. Olhe para a estrutura de H5 novamente:

 <div id = login-div> <div class = select-wrapper> <select id = selettor1> <opção value = despojado selectd> Selecione o sistema: </pption> <opção = 1> weChat-apple </op < /Op -wrapper> <select id = selettor2> <opção = desativado Selecionar> Selecione o canal: </option> <opção Valor = 1> canal 1 </pption> <opção value = 2> canal 2 </pption> <img src = Ossweb-img/arrow.png.png </div> <div class = select-wrapper> <select ID = Selector3> <Opção Valor = Disponed SelectD> Selecione a região: </pption> <Option Value = 1> Ue = 2> regiões 2 </pption> </leclect> <img src = ossweb-img/arrow.png </div> <div class = select-wrapper> <select id = selettor4> <opção Valor = desativado selec ted > Selecione o caractere: </pption> <opção value = 1> caractere 1 </pption> <opção value = 2> caractere 2 </pption> </leclect> <img src = ossweb-img/arrow.png < /div> <p id = aviso> Uma única conta só pode receber uma vez que prêmio </p> <img src = ossweb-img/comfire1.png </div>

3. A parte do estilo é controlada pelo SASS. Não há operações especiais a serem transformadas, por isso é fácil substituir o CSS

 @Function Rem ($ n) {@return $ n/$ rem*1rem;} #login-div {Background: url (../ ossweb-img/kuang1.png) 0 0 No-repetir; % 100%; : Centro; 1px sólido #23282d; : Rem (41); 20); Margem-heft: rem (174);}}

4. Análise: principalmente o controle de posição do ícone do lado direito do lado direito da direita. Utilizando a posição do atributo para controlar a posição com a posse: absoluto;

O acima é o HTML5 e selecione a caixa de queda para o lado direito do HTML5 e selecione. Muito obrigado pelo seu apoio ao site VevB Wulin!