おしゃれなセレクトボックス（ドロップダウンリスト）のCSS・javascriptサンプルまとめ

最終更新日: 2017/09/16

フォームのselectタグをそのまま利用するとデザインが味気ないですよね。でもフォームはCSSでデザインをいじるのに苦労することが多いのも事実であり、手間をかけてられない部分でもあります。

ここは手っ取り早く、他人が作ったおしゃれなセレクトボックス、ドロップダウンリストのデザインを参考にしてしまいましょう。
以下に紹介するセレクトボックス・ドロップダウンリストはすべてHTML、CSS、javascriptのソースが確認できます。

セレクトボックスをかっこよくすることでデザインの差別化を図ってみてはいかがでしょう。

ここで紹介するセレクトボックスは、すべてこのページ内でサンプルの動きを確認できるようにしています。
どうぞクリックしたり、マウスのhoverを確認してみてください。

”＞”マークが回転するアニメーションが心地よいドロップダウンリストです。

http://codepen.io/HieuHuynh/pen/ogZNbY

一見ありがちですが、余白バランスとhover時のフェードアニメーションのタイミングのバランスが気に入ったので取り上げました。

http://codepen.io/wallaceerick/pen/ctsCz

バウンスするアニメーションがセレクトボックスとして斬新でかっこいいです。

http://codepen.io/suez/pen/CqjBf

リストが回転しながら登場します。

http://codepen.io/husamui/pen/udtei

リストがバルーン（吹き出し）の形のドロップダウンリストです。デザインもシンプルでかっこいいですね。

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

リストのhover時のアニメーションが独特のデザインですね。

http://codepen.io/RedStarZOn/pen/GuriA

リストを畳んでいる状態では、カードを重ねたようなデザインです。シンプルですがおしゃれ感あるデザインですね。

http://codepen.io/Paddle_/pen/LVLgVw

横に展開するドロップダウンリストです。横方向という意外性はアリですか？

http://codepen.io/stevenfabre/pen/Awcvd

こちらも折り畳み時は、カードを重ねたようなデザインです。
展開時にリストにアイコンがあるのと、仕切りの線ではなく、隙間を空けるデザインというのが特徴です。

http://codepen.io/romswellparian/pen/gbqaey

アニメーションエフェクトは全然ないのですが、ドロップダウンリストっぽくないデザインとして、アリかもと思ったので紹介。
UXの観点からは、実際に使うにはちょっと勇気がいるかな。

http://codepen.io/lmarcos/pen/vEmaPJ

sounansa.net