〔 ▼〕選択プルダウン(SELECT～OPTION)をおしゃれにするCSSスニペット15選。
フォームのデザインをかっこよくする選択プルダウンのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
本記事ではフォームの中でも「選択式プルダウン(SELECT～OPTION)/ドロップダウンリスト」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
プルダウン/SELECT要素(シングル)の見栄えを劇的に良くするCSSデザイン例。
ふわっとポップにアニメーションするドロップダウンリスト。
See the Pen Custom Select by Yusuf (@yy) on CodePen.
ポップでステキなデザインのプルダウン/SELECT要素です。
選択時にふわっとボックスが動くと同時に、選択肢が吹き出し形式で表示されます。選択時の動作もスムースですし、フラットなデザインのサイトに合いそうです
シンプル＆スタイリッシュなプルダウン。
See the Pen Select Box with Placeholder [CSS Only] by James Nowland (@jnowland) on CodePen.
元のフォームが淡い灰色の枠に囲まれていて入力項目っぽくありません。しかし、オンフォーカスすると、青い色に浮かび上がります。
選択時のアニメーションはありませんが、非常にシンプル＆スタイリッシュなデザインですので、実用性が高そうです。
ボックス枠が伸びて選択候補値が表示されるプルダウン。
See the Pen CSS only Select by Nicolas Udy (@udyux) on CodePen.
プルダウンの枠線が伸びてoption要素が現れます。
デザインはシンプルなプルダウンですが、選択時のアニメーションが良いです。
プルダウンの選択で注釈メッセージが表示されるサンプルコード。
See the Pen Show-Hide based on Select Option jQuery by Bram de Haan (@atelierbram) on CodePen.
プルダウンを選択すると、プルダウンの下に注釈ラベルが表示されるサンプルコードです。
説明などを表示させたいときに使えそうですね。
背景に溶け込むようなポップなプルダウンリスト。
See the Pen Select-Boxes by Nipun Paradkar (@radiantshaw) on CodePen.
ポップでかわいいプルダウンです。
選択肢も選びやすいですし、使いやすいスニペットだと思います。
シンプルイズベスト！簡単だけど実用性を重視したプルダウンCSSデザイン例。
超シンプルだが縦幅が大きく選びやすくユーザビリティが良いプルダウン。
See the Pen Styling select box with CSS by Alex (@fabriceleven) on CodePen.
目立つようなアニメーションもありませんが、超シンプルで使い勝手のよいデザインのプルダウンです。
標準的なプルダウンだが、選択メニューの形式をカスタマイズ。
See the Pen SELECT right-arrow with CSS by Veiko (@vkjgr) on CodePen.
シンプルなプルダウンですが、右側の選択メニューの矢印のデザインが変わっています。
アニメーションはありませんがコンパクトで良いと思います。
フォームのセットで使えるプルダウン①。
See the Pen
Completely CSS: Custom checkboxes, radio buttons and select boxes by Kenan Yusuf (@KenanYusuf)
on CodePen.
こちらもシンプルなデザインですが、チェックボックス・ラジオボタン・プルダウンのセットで提供されていて使いやすいです。読み取り専用フォームもあります。
ただしstylus記述です。scssやピュアcssで使いたい方は書き直しが必要です。
フォームのセットで使えるプルダウン②。
See the Pen
uSwitch pure CSS select control v1.0 by Craig Morey (@pixelthing)
on CodePen.
シンプルなデザインですが、読み取り専用・エラー時・背景ダークなど様々なパターンが用意されています。
非常に参考になりますね。
アニメーションが面白い奇抜なプルダウン/SELECT要素(シングル)CSSデザイン例。
select/option要素のボックスがフォーカスで動くプルダウン。
See the Pen Custom <select&rt; by Christophe CORBALAN (@RedStarZOn) on CodePen.
一見、普通のプルダウンに見えますが、フォーカスで文字位置・ボックス幅が変わります。選択時のoption要素についても同様ですね。
ちょっと動きがうるさい感じはしますが、デザイン性が高いドロップダウンリストだと思います。
カードタイプのセレクトボックスメニュー。展開＆選択時のアニメーションもスムーズ。
See the Pen Select Menu by Pierre Laurent (@Paddle_) on CodePen.
プルダウンがまるでカードが重なっているようなデザインになっています。選択時はカードが縦に展開されます。
こちらもデザイン性が高いスニペットです。
背景ラベルの一体化しているプルダウン。選択時に色が変わる。
See the Pen Simple custom select by Alessandro Falchi (@afalchi82) on CodePen.
一見、ただのラベルに見えますが、文節の末尾の単語部分(アンダーライン)がプルダウンになっています。
選択できることが識別しにくいので実用性には欠けるかもしれませんが、ステキなデザインですね。
ふわっと浮いてるプルダウン。選択時にoption要素が回転しながら表示される。
See the Pen Custom select menu by Husam Alrubaye (@husamui) on CodePen.
空中にフワフワと浮いているようなスタイルのプルダウンです。選択肢を選ぶ際には選択候補がクルっと回転しながら現れます。
かなり奇抜なアニメーションですが、かっこいいですね。
選択項目がカッコよく追加・削除されるmultiple select。
See the Pen Fancy multiple select by Aaron Iker (@aaroniker) on CodePen.
選択肢を選ぶと一瞬消えますが、その後に選択済として表示されるかっこいいデザインのmultiple selectです。
削除するときの動きもカッコいいですね。
選択時に矢印ボタンがクルっと動くプルダウン。
See the Pen Custom select option by Hieu Huynh (@HieuHuynh) on CodePen.
ベースのデザインもステキですが、選択時に矢印ボタンがクルっと動きます。
こちらもカッコいいアニメーションをするプルダウンです。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
