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

プログラミング学習

cssのselect要素の装飾についてです。

selectで枠線や矢印を消す【inputのcssデザイン】

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

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

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

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

selectのoptionはcssが効かない

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

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

スポンサーリンク

selectのサンプルコード

codepenをみてみました。

かわいいのですね。親要素に幅を指定して擬似要素ですね。

Attention Required! | Cloudflare

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

Attention Required! | Cloudflare

vueのサンプルです。

Attention Required! | Cloudflare
スポンサーリンク

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をコピーしました