セレクト

ネイティブの select 要素をカスタムCSSでカスタマイズして、要素の初期表示を変更することができます。

Default

カスタムスタイルは FormSelect の最初の外観に限定され、ブラウザの制限により Option を変更することはできません。

Selected
2
vue
<template>
 <BFormSelect
  v-model="selected_sample"
  aria-label="Default select example"
 >
  <option>
   Open this select menu
  </option>
  <option value="1">
   One
  </option>
  <option value="2">
   Two
  </option>
  <option value="3">
   Three
  </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('2');
</script>

Sizing

また、同サイズのテキスト入力に合わせて、大小のカスタムセレクトを選択することもできます。

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

<script setup>
const selected_sample = ref('Open this select menu');
</script>

また、multiple 属性もサポートされています。:

Selected
[2,3]
vue
<template>
 <BFormSelect
  v-model="selected"
  length="4"
  multiple
  aria-label="size 3 select example"
 >
  <option
   value=""
   selected
  >
   Open this select menu
  </option>
  <option value="1">
   One
  </option>
  <option value="2">
   Two
  </option>
  <option value="3">
   Three
  </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>

length 属性もサポートされています。:

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

<script setup>
const selected_sample = ref('Open this select menu');
</script>

Disabled

ブール属性のdisabledをセレクトに追加すると、グレーアウトした外観になり、ポインターイベントが削除されます。

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

<script setup>
const selected_sample = ref('Open this select menu');
</script>

See Also