Pseudo-classe para selects não selecionados.

[LuanDc]

Bom dia, devs.

Preciso criar um campo de select onde o efeito é mover a label para o topo assim que o usuário selecionar uma option. Acredito que a melhor forma seja fazer essa ação dentro do próprio CSS, utilizando das pseudos-classes que o CSS fornece. A dúvida é, qual a melhor forma de fazer isso e se é possível gerenciar o estado desse select sem Javascript.

[kvnol]

@LuanDc mano, eu acho que apenas com CSS não é possível. Porque você estaria personalizando as options, que tem um comportamento padrão do browser não é possível modifica-las.

[LuanDc]

Qual a melhor forma de criar uma lógica de componente com jquery e reaproveitar em todos os selects da aplicação?

[kvnol]

@LuanDc como está usando jQuery, usa o Select2 que ele já faz tudo isso pra ti: https://select2.org/

[LuanDc]

Obrigado pela contribuição, consegui resolver com pseudo classes mas foi um pouco complicado haha. Mas na próxima vou levar em consideração do plugin.

[kvnol]

@LuanDc solta esse resultado no Codepen, fiquei curioso.

[wilsongomes-swe]

Apenas dando meus 50 centavos de contribuição kkk

Ao meu ver o melhor a se fazer é sempre seguir: Se é lógica faz em JS, se é visual e estilização faz em CSS.

Já passei por projetos que por preciosismo galera abusava de pseudo-classes muitas vezes para fazer questões que estavam bem mais para lógica do que para estilização, acabando gargalando a legibilidade e manutenção do código. Assim como também acho bem fora das melhores práticas aqueles efeitos de hover de aumentar ou diminuir imagens feitos em JS, já que é um aspecto bem visual...

---

☺️
by: Wilson Neto
Linkedin - Blog - Github

[LuanDc]

Bom dia, pessoa. Quando eu largar aqui do serviço irei compartilhar o resultado com vocês no Codepen.

[LuanDc]

@wilsonneto-dev eu sempre evito ao máximo usar estado no jquery, acho bastante complicado pois não é tão fácil ficar movendo lógica de js arquivo em arquivo. Talvez eu pense em alguma abstração pra isso.

[LuanDc]

Consegui fazendo dessa forma, sem o evento de onclick o estado do select não consegue ser alterado. Se tiverem criticas e sugestões estarei aberto a ouvi-los :)

https://codepen.io/luandc/pen/RwPgddm

[glauberm]

@LuanDc Ó: https://codepen.io/glauberm/pen/RwPZqrM

Você estava indo certo com o :valid ali, mas o select precisa estar como required para funcionar. Daí nem precisa do :not([value=""]). O padding aplicado só ao estado selecionado da label junto com o transition não especificado faziam ela dar uma mexidinha durante a animação, que acho você tentou corrigir diminuindo o left ali, mas aí ela mexe para a direita? Fiquei sem entender qual animação você queria, kkk. Mas de toda forma o ideal é só animarmos transform e opacity sempre que pudermos e acho que o transform é uma propriedade melhor para o seu problema mesmo. O font-size: rem(11) também fiquei sem entender...

[LuanDc]

@glauberm Quanto a rem foi um erro meu, eu copiei componente do projeto em que trabalho. Acabou que na correria não revisei direito e esqueci de tirar a função que criei, ela só transforma PX para REM automaticamente. A animação era só fazer a label se posicionar no topo e um pouco pra esquerda. Essa posição adicional a esquerda é importante, pois alguns tem modificadores de ícones, o que deixaria a label mais a direita.

Queria agradecer o feedback, essa dica de usar o transform foi bastante legal, pois assim não preciso trabalhar com position.

[LuanDc]

Sobre o padding, é só pra que o background da label seja um pouco mais largo e sobressaia a linha do input.

[glauberm]

Sim... Só estou dizendo que essa é uma propriedade que você já quer na label desde seu estado inicial, colocar o padding só no estado selecionado me parece errado. Se você quer a label pra esquerda, o lance é mexer no translateX ao invés de ir pelo left...