Bootstrap 5 Keuzemenu

Select menu

Select menu (select one item):

Select menu (hold Ctrl or Shift or drag with the mouse to select multiple):

Als u gebruikers wilt toestaan om uit meerdere opties te kiezen, gebruik dan een keuzelijst.

Als u de stijl van de keuzelijst wilt instellen in Bootstrap 5, voeg dan toe: .form-select Voeg klasse toe aan het <select>-element:

Voorbeeld

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

Probeer het zelf

Grootte van de keuzelijst

Gebruik .form-select-lg of .form-select-sm Gebruik klasse om de grootte van de keuzelijst te wijzigen:

Voorbeeld

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

Probeer het zelf

Schakel keuzelijst uit

Gebruik disabled Eigenschap om keuzelijst uit te schakelen:

Voorbeeld

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

Probeer het zelf

Data List

Bootstrap kan ook de stijl van data lists instellen, die een vooraf gedefinieerde lijst van opties voor het <input>-element is:

Kies uw browser uit de lijst:

Voorbeeld

<label for="browser" class="form-label">Kies uw browser uit de lijst:</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>

Probeer het zelf