30.11.2024

Adicionando um Placeholder a uma Lista suspensa do Bootstrap

Resposta Rápida

Para criar um placeholder em uma lista suspensa do Bootstrap, aplique os atributos selected e disabled a um elemento option com o value definido como "" (aspas vazias) dentro do select:

<select class="form-select">
  <option value="" disabled selected>Selecione...</option>
  <!-- Espaço para outras opções -->
</select>

O texto "Selecione..." será a mensagem padrão e se tornará não selecionável uma vez que o usuário abrir a lista.

Informações Adicionais sobre Placeholders

Ocultando o Placeholder da Lista

Adicione o atributo hidden para evitar que o placeholder apareça na lista suspensa aberta, mantendo sua funcionalidade:

<select class="form-select">
  <option value="" disabled selected hidden>Selecione...</option>
  <!-- Opções adicionais -->
</select>

Placeholders Dinâmicos com jQuery

Use jQuery para criar um placeholder responsivo:

$('#mySelect').on('change', function () {
  // Adicionando interatividade a esta função 🌈
  if (!this.value)
    $(this).addClass('placeholder'); // O elemento fica cinza...
  else
    $(this).removeClass('placeholder'); // ...e recupera sua cor!
});

Este código altera o estilo do elemento com base em se uma opção foi selecionada, adicionando ou removendo a classe placeholder.

Configurando o Placeholder via selectpicker

Para o selectpicker, você pode definir o texto do placeholder durante a inicialização utilizando o parâmetro noneSelectedText:

$('.selectpicker').selectpicker({
  noneSelectedText: 'Escolha sem estresse...'
});

Visualização

Imagine a lista suspensa do Bootstrap como um chapéu seletor do mundo de Hogwarts 🧙‍♂️:

Selecione uma casa [🎭 Placeholder]
|-----------------------------|
| 🦅 Corvinal                 |
| 🦁 Grifinória               |
| 🐍 Sonserina                |
| 🦡 Lufa-Lufa                |

E quando uma escolha é feita, o "chapéu" declara:

Escolhido: 🦁 Grifinória

O placeholder, na verdade, cumpre uma função similar, tornando a fase de seleção inicial mais interativa.

Recursos Avançados de Placeholders

Estilizando o Placeholder

Aplique estilos para destacar o primeiro elemento option como um placeholder:

.form-select .placeholder {
  color: gray; /* Um toque de incerteza na seleção */
}

Placeholder Alternativo com Title

Como uma alternativa simplificada, você pode atribuir um title:

<select class="form-select">
  <option title="placeholder" selected>Escolha algo</option>
  <!-- Outras opções para escolher -->
</select>

Usando Placeholders em Multi-Selects

O placeholder deve funcionar também em listas de múltipla seleção:

<select class="selectpicker" multiple data-none-selected-text="Nada selecionado">
  <!-- Espaço para suas preferências -->
</select>

Compatibilidade com Diferentes Versões do Bootstrap

Adapte-se às diferenças nas versões do Bootstrap seguindo a documentação atual.

Recursos Úteis

1. Dropdowns · Bootstrap — Documentação oficial sobre como criar listas suspensas no Bootstrap.
2. Como Criar Menu Suspenso com Bootstrap 5 - Tutorial Republic — Um guia para criar dropdowns no Bootstrap.
3. Estilizando um Select Como se Fosse 2019 | CSS-Tricks — Dicas para estilizar elementos select de maneira moderna.
4. <select>: O Elemento Select em HTML - HTML: HyperText Markup Language | MDN - Guia abrangente sobre o elemento <select> do MDN.
5. Introdução | bootstrap-select · SnapAppointments Developer — Introdução ao plugin bootstrap-select.
6. Select · Bootstrap v5.0 — Guia detalhado sobre como trabalhar com elementos de lista suspensa no Bootstrap 5.
7. <option>: O Elemento Option em HTML - HTML: HyperText Markup Language | MDN — Descrição detalhada da tag <option> para listas suspensas.

Video

Navigation