Bootstrap 5.2 / Formulieren

Select

Pas de native `<select>`s aan met eigen CSS die het basisuiterlijk van het element wijzigt.

Standaard

Aangepaste <select>-menu's hebben alleen een eigen klasse nodig, .form-select, om de aangepaste stijlen te activeren. De aangepaste stijlen beperken zich tot het basisuiterlijk van de <select> en kunnen de <option>s vanwege browserbeperkingen niet aanpassen.

HTML

<select class="form-select" aria-label="Voorbeeld van standaard select">
  <option selected>Open dit selectiemenu</option>
  <option value="1">Een</option>
  <option value="2">Twee</option>
  <option value="3">Drie</option>
</select>

Afmetingen

Je kunt ook kiezen uit kleine en grote aangepaste selects, passend bij onze tekstinputs van vergelijkbaar formaat.

HTML

<select class="form-select form-select-lg mb-3" aria-label="Voorbeeld van .form-select-lg">
  <option selected>Open dit selectiemenu</option>
  <option value="1">Een</option>
  <option value="2">Twee</option>
  <option value="3">Drie</option>
</select>

<select class="form-select form-select-sm" aria-label="Voorbeeld van .form-select-sm">
  <option selected>Open dit selectiemenu</option>
  <option value="1">Een</option>
  <option value="2">Twee</option>
  <option value="3">Drie</option>
</select>

Het attribuut multiple wordt ook ondersteund:

HTML

<select class="form-select" multiple aria-label="Voorbeeld van multiple select">
  <option selected>Open dit selectiemenu</option>
  <option value="1">Een</option>
  <option value="2">Twee</option>
  <option value="3">Drie</option>
</select>

Net als het attribuut size:

HTML

<select class="form-select" size="3" aria-label="Voorbeeld van select met size 3">
  <option selected>Open dit selectiemenu</option>
  <option value="1">Een</option>
  <option value="2">Twee</option>
  <option value="3">Drie</option>
</select>

Uitgeschakeld

Voeg het booleaanse attribuut disabled toe aan een select om hem grijs te maken en pointer events uit te schakelen.

HTML

<select class="form-select" aria-label="Voorbeeld van uitgeschakelde select" disabled>
  <option selected>Open dit selectiemenu</option>
  <option value="1">Een</option>
  <option value="2">Twee</option>
  <option value="3">Drie</option>
</select>

Sass

Variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.