【セレクトボックスのcssデザイン】input select編【bootstrap】

2024年7月22日

select要素のもろもろまとめです。select要素をcssで装飾します。

Contents

1 selectで枠線や矢印を消す【セレクトボックスのcssデザイン】
2 vueのselectとv-modelとv-for/初期値を設定
- 2.1 bootstrapの場合
- 2.2 通常のselect(オリジナルデザインはbootstrapを使わない方がよし)
3 selectboxのサンプルデザインコード
- 3.1 codepen
- 3.2 selectの生年月日のサンプルコード
4 vue selectボックスライブラリ比較
5 vueのselect、結局どれを選んだの?

selectで枠線や矢印を消す【セレクトボックスのcssデザイン】

個別対応したいのならinput要素のclassを追加。

まず、消すことからはじめましょう。そのあと矢印は擬似要素で追加するのがよいです。

.select-box {
  border: none;
  outline: none;
  appearance: none;
}

borderは通常の輪郭、outlineは選択時にでる輪郭(:focusを付加しなくても消えるようです)、appearanceは矢印です。

absolute0で矢印の位置がずれる

.select-box {
  margin: 2rem 0;
}

wrapしてオリジナルの矢印をabsoluteで配置する場合、矢印の位置がぴったりあわなかったりします。selectのデフォルトのマージンのせいです。0にするとあいます。

オリジナルの矢印を配置する場合、半透明にするとあわせやすいでしょう。

矢印のCSSはpointer-events: none;

オリジナルの矢印を作る場合、下記を忘れてはいけません。矢印をクリックしてもセレクトボックスが開きませんから、バグになります。

pointer-events: none;

selectのoptionはcssが効かない

optionで開く方がシステム側のようです。iPhone、Android、PCと各々デザインが用意されています。

詳しく調べていませんが、cssではなくJavascriptでの対応が必要そうです。

vueのselectとv-modelとv-for/初期値を設定

bootstrapの場合

bootstrapの場合はシンプルにかけます。

<b-form-select v-model="selected" :options="options"></b-form-select>

computed: {
    selected: {
        get() {
            return this.selectedData
        },
        set(val) {
            this.selectedData = val
        }
    }
}

初期値はdataに設定した方がよい。

data() {
  return {
    selectedData: 'a'
  }
}

ただ、オリジナルのデザインにすると何かと面倒でやめました。bootstrap自体を使うことを辞めたということです。

通常のselect(オリジナルデザインはbootstrapを使わない方がよし)

<select v-model="selected" class="select-box">
  <option v-for="option in options" :key="option.value" :value="option.value">
    {{ option.text }}
  </option>
</select>

v-modelはgetとsetがある場合はdataの初期値を指定します。computedの関数を指定したままだとちょいとバグっていたので。

:valueがあると初期値が表示されます。この場合、v-modelの選択されたものがきちんと表示されます。firebaseを使っている場合、このvalueの値が保存されます。select-boxのclassを使うと独自のデザインにできます。

optionsはcomputedかdataに指定するかですかね。この点はどちらでもかまいません。nuxtを利用しています。

computed: {
  options() {
    return ['りんご', 'みかん', 'ばなな']
  }
}

data() {
  return {
     selected: 'apple',
     options: [
      { text: 'りんご', value: 'apple' },
      { text: 'みかん', value: 'orange' },
      { text: 'ばなな', value: 'banana' }
     ]
  }
}

selected: ‘りんご’みたいなことももちろんできますけど、v-for分でまわすことまで考えてtextとvalueはわけた方がいいですね。

この場合もcomputedをかましてselectedDataを初期値としていい気がします。

computed: {
    selected: {
        get() {
            return this.selectedData
        },
        set(val) {
            this.selectedData = val
        }
    }
}

生年月日など何らかの計算式が必要な場合はcomputed必須です。数字の場合はこうなります。

<select v-model="selectedMonth" class="selectbox-design">
    <option v-for="month in months" :key="month" :value="month">
        {{ month }}
    </option>
</select>

selectboxのサンプルデザインコード

codepen

codepenをみてみました。

かわいいのですね。親要素に幅を指定して擬似要素ですね。いい感じのものはbootstrapを使っていません。

https://codepen.io/fatihhayri/pen/FCwBf

jsを使うとこのようなことができるようです。デザインの矢印の動きがいいですね。

https://codepen.io/yy/pen/vOYqYV

vueのサンプルです。

https://codepen.io/sagalbot/pen/NXBwYG

selectの生年月日のサンプルコード

selectといえば生年月日が定番ですよね。

<b-col sm="9">
    <div style="display: flex;">
      <div class="selectbox-design-wrap">
        <select v-model="choiceYear" class="selectbox-design">
          <option v-for="year in years" :key="year.value" :value="year.value">
            {{ year.text }}
          </option>
        </select>
        <span><fa :icon="['fas', 'hand-point-down']"/></span>
      </div>
      <div class="selectbox-design-wrap">
        <select v-model="choiceMonth" class="selectbox-design">
          <option v-for="month in monthData" :key="month.value" :value="month.value">
            {{ month.text }}
          </option>
        </select>
        <span><fa :icon="['fas', 'hand-point-down']"/></span>
      </div>
      <div class="selectbox-design-wrap">
        <select v-model="choiceDay" class="selectbox-design">
          <option v-for="day in days" :key="day.value" :value="day.value">
            {{ day.text }}
          </option>
        </select>
        <span><fa :icon="['fas', 'hand-point-down']"/></span>
      </div>
    </div>
  </b-col>

横並びする場合、親となるselectbox-design-wrapにも、子となるselectbox-designにもwidthの指定が必要です。親に指定しないと崩れます。

// new Dateのサンプル
const birthday = format(
  new Date(this.selectedYear, this.selectedMonth - 1, this.selectedDay),
  'yyyy.MM.dd'
)
const parsedBirthday = parseISO(birthday)
const today = format(new Date(), 'yyyy.MM.dd')