【inputのcssデザイン】select編【bootstrap/vue】

プログラミング学習

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

selectで枠線や矢印を消す【inputの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>

: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を使っていません。

Attention Required! | Cloudflare

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

Attention Required! | Cloudflare

vueのサンプルです。

Attention Required! | Cloudflare

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の指定が必要です。親に指定しないと崩れます。

スポンサーリンク

vue selectボックスライブラリ比較

選択ライブラリもあるのですね。githubで更新日の確認もできます。比較するとvue selectが頻繁に更新されているようです。

Vue Select

公式。

Vue Select | VueJS Select2/Chosen Component
Everything you wish the HTML select element could do, wrapped up into a lightweight, extensible Vue component.

github。

GitHub - sagalbot/vue-select: Everything you wish the HTML element could do, wrapped up into a lightweight, extensible Vue component.
Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component. - GitHub - sagalbot/vue-select: Everythin...

Vue-Multiselect

公式。

Vue-Multiselect | Vue Select Library.
Probably the most complete selecting solution for Vue.js, without jQuery.

github。

GitHub - shentao/vue-multiselect: Universal select/multiselect/tagging component for Vue.js
Universal select/multiselect/tagging component for Vue.js - GitHub - shentao/vue-multiselect: Universal select/multiselect/tagging component for Vue.js

vue-strap

github。

GitHub - yuche/vue-strap: Bootstrap components built with Vue.js
Bootstrap components built with Vue.js. Contribute to yuche/vue-strap development by creating an account on GitHub.
スポンサーリンク

vueのselect、結局どれを選んだの?

ライブラリは気にいったものがあれば使えばいいと思うのですが、個人的にはいろいろと検討はしたものの、現在、ライブラリは利用していません。こちらの記事(上記)にあるサンプルコードのとおりです。

bootstrap(b-form-select)もデフォルトのデザインが邪魔になることが多く、外しました。

ラジオボタンもチェックボックスもbootstrapの利用は外すことが多いです。

現在はシンプルなselectに独自のcssを装飾して使うことに落ち着きました。自分で好きなようにデザインしたいデザイナーの方はこの方法がおすすめかもしれません。

コメント

タイトルとURLをコピーしました