Select

Customize the native select elements with custom CSS that changes the element's initial appearance.

On this page

Default

Custom styles are limited to the FormSelect's initial appearance and cannot modify the Options due to browser limitations.

Selected
vue
<template>
  <BFormSelect
    v-model="selected_sample"
    aria-label="Default select example"
  >
    <b-option selected>
      Open this select menu
    </b-option>
    <b-option value="1">
      One
    </b-option>
    <b-option value="2">
      Two
    </b-option>
    <b-option value="3">
      Three
    </b-option>
  </BFormSelect>
  <b-dl margin="t-5">
    <b-dt col="sm-3">
      Selected
    </b-dt>
    <b-dd col="sm-9">
      {{ selected_sample }}
    </b-dd>
  </b-dl>
</template>
<script setup>
const selected_sample = ref('')
</script>

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

vue
<template>
  <BFormSelect
    size="lg"
    aria-label="size 3 select example"
    margin="b-3"
  >
    <b-option selected>
      Open this select menu
    </b-option>
    <b-option value="1">
      One
    </b-option>
    <b-option value="2">
      Two
    </b-option>
    <b-option value="3">
      Three
    </b-option>
  </BFormSelect>
  <BFormSelect
    size="sm"
    aria-label="size 3 select example"
  >
    <b-option selected>
      Open this select menu
    </b-option>
    <b-option value="1">
      One
    </b-option>
    <b-option value="2">
      Two
    </b-option>
    <b-option value="3">
      Three
    </b-option>
  </BFormSelect>
</template>

The multiple attribute is also supported:

Selected
[2,3]
vue
<template>
  <BFormSelect
    v-model="selected"
    length="4"
    multiple
    aria-label="size 3 select example"
  >
    <b-option
      value=""
      selected
    >
      Open this select menu
    </b-option>
    <b-option value="1">
      One
    </b-option>
    <b-option value="2">
      Two
    </b-option>
    <b-option value="3">
      Three
    </b-option>
  </BFormSelect>
  <b-dl margin="t-5">
    <b-dt col="sm-3">
      Selected
    </b-dt>
    <b-dd col="sm-9">
      {{ JSON.stringify(selected) }}
    </b-dd>
  </b-dl>
</template>
<script setup>
const selected = ref([2, 3])
</script>

As is the length attribute:

vue
<template>
  <BFormSelect
    length="3"
    aria-label="size 3 select example"
  >
    <b-option selected>
      Open this select menu
    </b-option>
    <b-option value="1">
      One
    </b-option>
    <b-option value="2">
      Two
    </b-option>
    <b-option value="3">
      Three
    </b-option>
  </BFormSelect>
</template>

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

vue
<template>
  <BFormSelect
    aria-label="Disabled select example"
    disabled
  >
    <b-option selected>
      Open this select menu
    </b-option>
    <b-option value="1">
      One
    </b-option>
    <b-option value="2">
      Two
    </b-option>
    <b-option value="3">
      Three
    </b-option>
  </BFormSelect>
</template>