Menu de Selecção Bootstrap 5

Menu de seleção

Menu de seleção (selecione um item):

Menu de seleção múltipla (pressione Ctrl ou Shift (ou arraste com o mouse) para selecionar múltiplos):

Se você desejar permitir que o usuário selecione várias opções, use a lista de seleção.

Para definir o estilo da lista de seleção no Bootstrap 5, use .form-select Adicione a classe a elementos <select>:

Exemplo

<select class="form-select">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Experimente pessoalmente

Tamanho da lista de seleção

Use .form-select-lg ou .form-select-sm Adicione classes para alterar o tamanho da lista de seleção:

Exemplo

<select class="form-select form-select-lg">
<select class="form-select">
<select class="form-select form-select-sm">

Experimente pessoalmente

Desativar lista de seleção

Use disabled Propriedade desativada da lista de seleção:

Exemplo

<select class="form-select" disabled>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

Experimente pessoalmente

Lista de dados

O Bootstrap também pode definir o estilo de listas de dados, que é uma lista de opções pré-definidas para o elemento <input>:

Selecione seu navegador da lista:

Exemplo

<label for="browser" class="form-label">Selecione seu navegador da lista:</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Experimente pessoalmente