HTML e CSS: Criando um Caixa de seleção personalizada

Quando o assunto é desenvolvimento web, frequentemente precisamos personalizar elementos de interface para melhorar a experiência do usuário e integrar o design visual do site. Neste artigo, vamos criar um componente de seleção (dropdown) personalizado que não só parece bom mas também é acessível.

Estruturando o HTML inicialComece por definir a estrutura básica do seu componente de seleção. Vamos utilizar um input tipo checkbox para controlar a visibilidade da lista de opções e ícones para melhorar a experiencia de usuário. Aqui usamos a biblioteca de ícones lucide-react: https://lucide.dev/guide/packages/lucide

<div class="select">
	<div id="category-select">
	  <label for="options-view-button">Categoria</label>
	    <input type="checkbox" id="options-view-button" />

	    <div id="select-button">
	      <div id="selected-value">Selecione a categoria</div>

        <div id="chevrons">
	        <i data-lucide="chevron-down"></i>
	        <i data-lucide="chevron-up"></i>
        </div>
		  </div>
	</div>
</div>
<script src="<https://unpkg.com/lucide@latest>"></script>

Aplicando CSS para EstilizaçãoA estilização é crucial para garantir que o componente de seleção não só funcione bem, mas também tenha uma boa aparência. Aqui está o CSS básico para começar:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.select {
  padding: 6rem;
}

#category-select label {
  font-size: 0.75rem;
  letter-spacing: 0.0225rem;
}

#select-button {
  margin-top: 0.5rem;
  display: flex;
  padding: 0.75rem;
  align-items: center;
  justify-content: space-between;

  border-radius: 0.375rem;
  border: 1px solid #252529;
  background-color: #17171a;
}

Com isso você terá esse resultado 👇

Agora vamos estilizar a parte interna do nosso input com mais CSS dando mais sentido a essa caixa de seleção, até porque aqueles dois ícones não fazem sentido juntos. Sem muito mistério vamos pro CSS:

#selected-value {
  color: #afabb6;
  font-size: 0.875rem;
  letter-spacing: 0.02625rem;
}

#chevrons svg {
  width: 1rem;
  height: 1rem;
}

#chevrons {
  color: #afabb6;
}

#chevrons [data-lucide='chevron-up'] {
  display: none;
}

Resultado👇

Agora vamos explodir nossa cabeça com mais um pouco de CSS. A ideia é dar, a nossa caixa de seleção, mais vida e funcionalidades:

#options-view-button:focus + #select-button,
#options-view-button:checked + #selected-button {
  outline: 1px solid #a881e6;
}

#category-select:has(#options-view-button:checked) label,
#options-view-button:checked
  + #select-button
  #chevrons
  [data-lucide='chevron-down'] {
  color: #a881e6;
}

#options-view-button:checked
  + #select-button
  #chevrons
  [data-lucide='chevron-down'] {
  display: none;
}

#options-view-button:checked
  + #select-button
  #chevrons
  [data-lucide='chevron-up'] {
  display: block;
}

Com isso adicionamos estilos condicionais ao componente de seleção personalizado. Quando o checkbox é focado ou marcado, o botão de seleção é destacado com uma borda. Além disso, a cor dos ícones de seta muda e a seta para baixo é ocultada enquanto a seta para cima é mostrada, indicando que o menu de seleção está ativo ou expandido.

Resultado 👇

Com Um pouco mais de CSS, vamos controlar comportamento visual do checkbox representado pelo #options-view-button dentro do nosso componente de seleção customizado:

**#category-select {
  position: relative;
}

#options-view-button {
  all: unset;
  position: absolute;
  inset: 0;
  cursor: pointer;
  z-index: 3;
}**

Embora o checkbox esteja invisível, você vai perceber que toda a área do #category-select funcione como um botão interativo que, quando clicado, pode exibir ou esconder outros elementos, como uma lista de categorias, indicada pelos ícones de setas para cima e para baixo. Isso acontece porque estamos usando a propriedade position e seus valores: relative e absoluteResultado 👇

Vamos construir as opções de dentro do nosso componente de seleção. Aqui está aqui está o trecho do HTML, repita algumas vezes e mude os icones, label e value como desejar:

      <ul id="options">
        <li class="option">
          <input
            type="radio"
            name="category"
            value="vegetable"
            data-label="Legume"
          />
          <i data-lucide="carrot"></i>
          <span class="label">Legumes</span>
          <i data-lucide="check"></i>
        </li>
        <li class="option">
          <input
            type="radio"
            name="category"
            value="bakery"
            data-label="Padaria"
          />
          <i data-lucide="sandwich"></i>
          <span class="label">Pães</span>
          <i data-lucide="check"></i>
        </li>
      </ul>

Após fazer isso você terá um resultado parecido com esse:

Vamos estilizar?

#options {
  margin-top: 0.25rem;
  border-radius: 0.375rem;
  background: #17171a;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.75rem;

  border-bottom: 1px solid #252529;
}

.option .label {
  color: #fbf9fe;
}

.option svg {
  width: 1rem;
  height: 1rem;
}

Com isso facilitamos a identificação das opções por parte do usuário e permitimos uma navegação mais intuitiva e agradável visualmente 😉

Hmmm, porém acredito que podemos melhorar, vamos jogar o último icone (o check) para o canto direito? Bem simples:

#option svg:last-child {
  margin-left: auto;
  color: #a881e6;
}

Aqui usamos o pseudo-elemento last-child para pegar o último svg de cada <li>

Ainda sobre CSS, que tal darmos feedbacks imediatos aos usuários que interagirem com nosso componente?

.option svg:last-child {
  margin-left: auto;
  color: #A881E6;
}

.option:has(input:checked),
.option:hover {
  border-bottom: 1px solid #252529;
  background-color: #252529;
}

.option:has(input:focus) {
  outline: 1px solid #A881E6;
}

.option [data-lucide="check"] {
  display: none;
}

.option:has(input:checked) [data-lucide="check"] {
  display: block;
}

Resultado:

E se você usar os teclas de navegação do seu teclado você vai que a acessibilidade está presente, testa aí.

E, após isso, você precisa aplicar a propriedade position com valor relative na classe .option . Pois, vamos deixar  nossos input de tipo radio  absoluto em relação ao option:

.option input[type="radio"] {
  all: unset;
  position: absolute;
  inset: 0;
  cursor: pointer;
}

Olha a mágica 👇

Deu vontade, vou colocar algumas cores no ícones:

.option:nth-child(1) {
  color: #BB9F3A;
}

.option:nth-child(2) {
  color: #8CAD51;
}

.option:nth-child(3) {
  color: #DB5BBF;
}

.option:nth-child(4) {
  color: #E07B67;
}

.option:nth-child(5) {
  color: #7B94CB;
}

Nesse caso, quando usamos usando o pseudo-classe :nth-child cada regra CSS aplica uma cor única ao conteúdo de cada elemento .option com base na sua ordem no contêiner pai.

O próximo passo agora é fazer com que a partir do estado da nossa caixa de seleção os nossos inputs do tipo radio altere a visibilidade e a cor. Ah, mas antes de tudo, vá no identificador #options e defina um propriedade display: none; para que os nossos inputs radio não sejam visíveis.

Após isso:

#category-select:has(#options-view-button:checked) + #options {
  display: block;
}

.select:has(.option input:checked) #category-select label {
  color: #A881E6;
}

.select:has(.option input:checked) #category-select {
  color: #FBF9FE;
}

Nas regras CSS que definimos aqui usam o pseudo-classe :has para estilizar elementos baseando-se no estado de seus elementos filhos, que é muito útil quando precisamos manipular a aparência dos elementos dependendo das interações do usuário.

Com isso finalizamos a parte visual de um componente de seleção personalizado. Aqui fizemos passo a passo para oferecer uma base sólida para criar um componente de seleção personalizado que não apenas se integra esteticamente com o design do seu site, mas também acessibilidade.

Experimente adicionar mais estilos e funcionalidades conforme necessário para atender às suas necessidades específicas. Com essas habilidades, você pode melhorar significativamente a interação do usuário em seu site.