Uma noite, eu estava perdendo tempo, lendo artigos na Internet e me deparei com
este hub de usuários
do Cyapa , onde está escrito como personalizar o select em css puro. No processo de visualização desta solução, encontrei vários momentos muito desconfortáveis que tentei consertar na minha solução para esse problema. Então, vamos começar.
Enquanto observava o código dessa postagem, notei que o autor fez uma seleção que não pode ser fechada ao clicar fora dela, bem como a incapacidade de abrir a seleção ao clicar no nome do elemento, se já estiver selecionado.
Na minha versão de personalização, eu, como o autor anterior, usei label, input [type = "radio"] e o poder dos seletores de css. Como a própria seleção usando ferramentas css é completamente impossível de personalizar, imitei o comportamento da seleção.
Para começar, joguei a seguinte marcação:
Mostrar código html <label for="select" class="select"> <input type="radio" name="list" value="not_changed" id="bg" checked /> <input type="radio" name="list" value="not_changed" id="select"> <label class="bg" for="bg"></label> <div class="items"> <input type="radio" name="list" value="first_value" id="list[0]"> <label for="list[0]">First option</label> <input type="radio" name="list" value="second_value" id="list[1]"> <label for="list[1]">Second loooooong option</label> <span id="text">Select something...</span> </div> </label>
Ao olhar para este código, você pode ter uma pergunta: “Por que todas as entradas têm o mesmo nome?”. Responderei imediatamente: isso é feito para que o nosso select se comporte adequadamente (abre e fecha quando necessário). Mas as primeiras coisas primeiro. Vamos passar para a parte mais interessante, na minha opinião, css.
Mostrar código css input { display: none; } #text { position: absolute; display: block; top: 0; padding-left: 10px; } .select { display: inline-block; width: 160px; height: 34px; line-height: 30px; position: relative; } .select:before { content: ">"; display: inline-block; background: white; position: absolute; right: -5px; top: 2px; z-index: 2; width: 30px; height: 26px; text-align: center; line-height: 26px; border: 2px solid #ddd; transform: rotate(90deg); cursor: pointer; } .select input[name="list"]:not(:checked) ~ #text { color: black; background: white; } .select input[name="list"]:checked ~ #text { background: transparent; color: transparent; z-index: 2; } #select:disabled ~ .items #text { background: #eee; } .items { display: block; min-height: 30px; position: absolute; border: 2px solid #ddd; overflow: hidden; width: 160px; cursor: pointer; } #select:not(:checked) ~ .items { height: 30px; } .items label { border-top: 2px solid #ddd; display: none; padding-left: 10px; background: white; } .items label:hover { background: #eee; cursor: pointer; } #select:checked ~ .items { padding-top: 30px; } #select:checked ~ .items label { display: block; } .items input:checked + label { display: block!important; border: none; background: white; } #select:checked ~ .bg { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 0; background: rgba(0,0,0,0.4); }
Aqui está - a parte mais interessante na qual é necessário entender como a alteração na escolha da entrada (todas as entradas com o tipo de rádio têm o mesmo nome => podemos escolher apenas uma delas) afeta nossa seleção. Outro recurso dessa opção é a capacidade de desativar a seleção usando o atributo desativado em #select.
Você pode encontrar um exemplo finalizado
aqui .
Isso, de fato, é tudo. Alguns pontos negativos do autor anterior foram corrigidos; portanto, esta solução, acredito, no momento pode ser considerada uma versão css ideal do select. Espero que minha solução seja útil para alguém.