Menú de selección Bootstrap 5

Selección de menú

Selección de menú (seleccionar una opción):

Menú de selección múltiple (mantén presionado Ctrl o Shift (o arrastra con el ratón) para seleccionar múltiples):

Si desea permitir que los usuarios selecciones múltiples opciones, utilice el menú de selección.

Para establecer el estilo del menú de selección en Bootstrap 5, utilice .form-select Añada la clase a los elementos <select>:

Ejemplo

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

Pruebe usted mismo

Tamaño del menú de selección

Utilice .form-select-lg o .form-select-sm Añada clases para cambiar el tamaño del menú de selección:

Ejemplo

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

Pruebe usted mismo

Deshabilitar el menú de selección

Utilice disabled Atributo para deshabilitar el menú de selección:

Ejemplo

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

Pruebe usted mismo

Lista de datos

Bootstrap también puede establecer el estilo de las listas de datos, que son listas de opciones predefinidas para el elemento <input>:

Elija su navegador de la lista:

Ejemplo

<label for="browser" class="form-label">Elija su navegador de la 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>

Pruebe usted mismo