【まとめ】セレクトボックスのオシャレなデザインCSSコピペサイト9選

セレクトボックスってブラウザそのままのデザインってちょっと味気ないというか、ダサいと感じませんか?
サイトのデザインを細部までこだわって作ったのにフォームのセレクトボックスがそのままだと…サイト全体のデザインを崩してしまうかもしれませんよね。

今回はそんなデフォルトのセレクトボックスじゃ我慢できないという方のためにCSSだけで簡単に変更できるオリジナルのデザインを紹介しているサイトを紹介していきます。

ライセンス等をしっかり確認して、ありがたく使わせて頂きましょう(/・ω・)/

プログラミングやWordPressを習得するのに一番近道な方法とは?

おすすめセレクトボックスデザイン紹介サイト9選

Eric Rasch(CODEPEN)

Style_a_Select_Box_Using_Only_CSS

CODEPENからEric Raschさんがデザインしてくれたセレクトボックスです。色鮮やかでキレイですね。色を自分のサイトに合わせてカスタマイズするだけで良い感じになりそう!

ちなみにCODEPENのライセンスはMITライセンスです。

 

Hiroki Tani(CODEPEN)

A_Pen_by_Hiroki_Tani

続けてCODEPENからの紹介で行きます。こちらは日本の方ですね。Hiroki Taniさんがデザインしてくれているものです。黄色い点線の部分もクリック出来るようになってます。カスタマイズ次第で面白く出来そうですね。

 

design EDGE

デモ|セレクトボックスのカスタマイズ

矢印の部分がかわいくてオシャレですね。このセレクトボックスは大きさも丁度良くて好きです。色を変えて自分のサイトに合わせちゃいましょう。

 

CSSFlow

Dark_and_Light_Dropdown_Lists_·_CSS_Demo

こちらもシンプルですね。白バージョンと黒バージョンがあります。

 

ゆめいろデザイン

セレクトボックス

レスポンシブデザインに対応しているセレクトボックスです。レスポンシブでサイトを作ることも多くなったと思いますので重宝しますね!

 

⑥ BRISK

セレクトボックス_株式会社BRISK

こちらのセレクトボックスはeasyselectbox.jsというjsのプラグインを使用してセレクトボックスを選択した時のBOXのデザインも変更しています。CSSだけだとどうしても選択時のBOX部分の見た目までは変更できないので、その部分も変えたいという方は是非参考にしてみてください。

※2017/02/03現在 残念ながら記事が削除されてしまったようです…。

 

Scribbletribe

Styling_Select_Dropdown_with_Javascript___CSS_-_Demo__1

こちらもjavascriptで選択時のBOXまでデザインしています。カッコ良いですよね。

 

Limelight Online

Style_a_Select_Box_Using_CSS

サイトURL
http://www.limelightonline.co.nz/blog/style/

今まで紹介した中では一番変わってる?デザインかもしれません。個性的なあなたに是非。

 

bavotasan.com

Style_a_Select_Box_Using_Only_CSS___bavotasan_com

シブいですね。ちょっと色を変えるだけでシブさを明るくカスタマイズ出来るかも!

 

番外編

 

Bootstrap

CSS_·_Bootstrap

番外編としてBootstrapを用意してみました。私はBootstrapを使う機会が多いのでこれが見慣れてます。シンプルなデザインで良いですよね。

 

オススメ書籍

HTML5やCSS3を基礎から勉強したい!と思っている方は下記の書籍がオススメですよ╭( ・ㅂ・)و ̑̑ グッ !
私も勉強中!

 

まとめ

セレクトボックスひとつとっても色々デザインがあって面白いですね。作成者に感謝しながら、ライセンスも確認して自分のサイトにピッタリなデザインのセレクトボックスにカスタマイズ出来ることを祈ってます。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA