Customize the native select elements with custom CSS that changes the element's initial appearance.
Custom styles are limited to the FormSelect
's initial appearance and cannot modify the Option
s due to browser limitations.
<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>
You may also choose from small and large custom selects to match our similarly sized text inputs.
<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:
<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:
<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>
Add the disabled
boolean attribute on a select to give it a grayed out appearance and remove pointer events.
<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>