27.11.2024

Adicionando Caixas de Seleção a Menus Dropdown em HTML e CSS

Resposta Rápida

Os elementos padrão de formulário HTML, como <select> e <option>, não suportam a inclusão de caixas de seleção. No entanto, usando nossa criatividade para resolver tarefas não padrões, podemos criar um menu suspenso personalizado substituindo o elemento de seleção por uma lista HTML e alcançando o widget desejado através de estilização com CSS e adicionando interatividade com JavaScript. Veja este exemplo básico:

<div class="dropdown">
  <span>Selecione as Opções</span>
  <ul>
    <li><input type="checkbox" id="opt1"><label for="opt1">Opção 1</label></li>
    <!-- Vamos dizer que esses são ingredientes para sua pizza -->
    <li><input type="checkbox" id="opt2"><label for="opt2">Opção 2</label></li>
    <!-- Cada componente é uma opção, e a caixa de seleção confirma isso -->
    <li><input type="checkbox" id="opt3"><label for="opt3">Opção 3</label></li>
    <!-- Uma caixa de seleção marcada diz "adicione isso à minha pizza" -->
  </ul>
</div>

.dropdown { display: inline-block; cursor: pointer; /* Cursor de ponteiro para o usuário */ }
.dropdown > span { border: 1px solid #ccc; padding: 5px; border-radius: 3px; }
.dropdown ul { display: none; position: absolute; background: white; list-style-type: none; padding: 0; }
.dropdown:hover ul { display: block; /* Aparição suave da lista ao passar o mouse */ }
.dropdown input[type="checkbox"] { margin-right: 5px; /* Adiciona espaço ao redor da caixa de seleção */ }

Esta abordagem permite criar uma lista suspensa personalizada com múltipla seleção, onde as caixas de seleção são exibidas ao passar o mouse, graças a um CSS bem configurado.

Adicionando Interatividade: A História do JavaScript

Uma lista suspensa personalizada se torna realmente mágica quando incorporamos interatividade usando JavaScript.

Monitorando Ações do Usuário com JavaScript

Com addEventListener, podemos responder às ações do usuário e controlar a visibilidade da lista suspensa:

// Conjunto de deliciosos ingredientes para pizza
const toppings = ["pepperoni", "cogumelos", "presunto", "abacaxi"]; // Quem pede com abacaxi?

// Função para alternar a visibilidade da lista suspensa
document.querySelector('.dropdown').addEventListener('click', function(event) {
  this.querySelector('ul').style.display = 'block';
  event.stopPropagation(); // Para a propagação adicional do evento!
});

window.addEventListener('click', function() {
  document.querySelector('.dropdown ul').style.display = 'none';
});

O script "observa" por cliques dos usuários: na lista suspensa para expandi-la, e fora dela para colapsá-la. Nada surpreendente!

Compatibilidade entre Navegadores: A Batalha Eterna dos Navegadores

Cada navegador tem suas peculiaridades quando se trata de interpretar CSS e JavaScript. Por exemplo, o Internet Explorer pode não reconhecer recursos modernos. Certifique-se de verificar a compatibilidade em Can I Use.

Utilizando Soluções Prontas: Bibliotecas ao Resgate

Frameworks e bibliotecas, como Bootstrap Multiselect ou multiple-select do jQuery, podem simplificar a tarefa de integrar caixas de seleção.

Visualização

Usar caixas de seleção em um menu suspenso é semelhante a adicionar uma coluna adicional a uma tabela de dados:

| Opção    | Caixa de Seleção ✅ |
| -------- | -------- |
| Opção 1  |    ✅     |
| Opção 2  |           |
| Opção 3  |           |
| Opção 4  |    ✅     |

Aqui, Opção 1 e Opção 4 são marcadas como selecionadas, lembrando uma lista de compras!

Estilização e Efeitos Adicionais

Melhorando os Estilos da Caixa de Seleção com CSS

Se você deseja controle total sobre a aparência da caixa de seleção, sinta-se à vontade para usar pseudo-elementos CSS:

/* Estilizando a caixa de seleção */
.dropdown input[type="checkbox"]::before {
  content: "✔"; /* Símbolo de marca de verificação em Unicode */
  display: none;
  /* A marca de verificação está oculta... */
}

.dropdown input[type="checkbox"]:checked::before {
  display: inline;
  /* E aqui ela aparece diante dos olhos do usuário. */
}

O Futuro da Interatividade: Frameworks Modernos de Javascript

Fãs de Vue.js, React ou Angular acharão as capacidades desses frameworks intrigantes, já que oferecem um gerenciamento de estado conveniente para desenvolver uma UI altamente interativa e dinâmica.

// Exemplo de componente em React
class MultiSelectDropdown extends React.Component {
  // Estado e métodos para gerenciar as caixas de seleção e o menu suspenso
  render() {
    return (
      // Aqui vamos renderizar nosso componente personalizado com caixas de seleção,
      // talvez cada caixa de seleção seja um mini-componente React separado - empolgante, não é mesmo?
    );
  }
}

Aplicações Práticas: Exemplos do Mundo Real

Caixas de seleção dentro de um elemento de seleção podem ser usadas além de formulários básicos. Elas são perfeitas para filtrar tabelas, configurar painéis ou pesquisas interativas, permitindo a seleção de várias opções ao mesmo tempo.

Recursos Úteis

1. <select>: Elemento HTML Select - HTML: HyperText Markup Language | MDN — Descrição detalhada e diretrizes para usar o elemento <select> em HTML.
2. Tag Select HTML - W3Schools — Tutoriais e exemplos para usar a tag <select> em HTML.
3. Estilização Personalizada de Inputs de Formulário com Recursos Modernos de CSS | CSS-Tricks — Formas de estilizar formulários e elementos de input, incluindo o elemento <select>, usando CSS.
4. Padrão HTML - O Elemento Option — Padrão para o elemento <option> em HTML.
5. Formulários Sensíveis: Uma Checklist de Usabilidade para Formulários – A List Apart — Melhores práticas e uma checklist para usabilidade de formulários, incluindo elementos complexos.
6. Posso usar... Tabelas de suporte para HTML5, CSS3, etc — Tabelas de compatibilidade para o elemento HTML <select> em vários navegadores e plataformas.
7. Dropdown Personalizado com Caixas de Seleção - CodePen — Um exemplo interativo com código para implementar uma lista suspensa personalizada com caixas de seleção.

Video

Navigation