sounansa.net

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

スポンサーリンク

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

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

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

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

Custom select option

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

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

CUSTOM SELECT WITHOUT PLUGIN

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

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

Custom select

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

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

Custom select menu

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

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

So so very very basic custom select

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

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

Cuteselect.js

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

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

Select Menu

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

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

Select Element UI

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

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

Effects Select

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

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

Select to list

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

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

スポンサーリンク

comments powered by Disqus