テキストボックスをおしゃれにするCSSスニペット16選。フォームのデザイン改善に。
フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。
シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。
テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。
See the Pen Animated Textbox by Stefan C. (@stefcharle) on CodePen.
input formセット一式で実用性が高いテキストボックスCSSデザイン例。
マークで入力欄の意味がわかるテキストボックス。
See the Pen Simple Input Text Box With Icon by zFunx (@zFunx) on CodePen.
シンプルなデザインですが、テキストボックスに入力する内容がマークでわかるようになっていて、利便性が高いデザインです。
入力フォームをデザインする際には、このようなデザインアイデアも参考になるかと思います。
マークで入力欄の意味がわかるテキストボックス②。
See the Pen
Bootstrap 3 Contact form with Validation by Jay (@jaycbrf)
on CodePen.
こちらもマークで入力欄の意味がわかるようになっているinput form一式になります。
シンプルだが美しい入力フォーム一式。
See the Pen Form Component Design (inspired by Android) by Rudi Theunissen (@rtheunissen) on CodePen.
こちらはテキストボックスだけでなく、入力フォーム一式が統一デザインで公開されています。シンプルですが利便性が高そうです。
各種コントロール一式が揃った入力フォームセット。
See the Pen
Basic hotel booking form by Andi Dysart (@andiio)
on CodePen.
フォーカスで項目ラベルが上がるタイプのテキストボックスです。
文字列テキストボックス、数値テキストボックス、テキストエリア、日付カレンダー、セレクトボックスなど各種コントロール一式が揃っており、非常に参考になります。
フォーカス移動でアニメーションするテキストボックス。
See the Pen
Dynamic focus by Tobias Glaus (@tobiasglaus)
on CodePen.
フォーカス移動するとテキストボックスの周りのシャドウが移動するアニメーションをします。
フォーム一式でこういう仕掛けをするのも楽しいですね。
奇抜さ・意外性を重視した一風変わったテキストボックスCSSデザイン例。
タイピングしていくと、入力文字が生き物のように動き出すテキストボックス。
See the Pen Animography’s Mobilo Text Editor in SVG by kittons (@airnan) on CodePen.
入力欄に文字入力していくと、文字が生き物のように動きながら入力されていきます。実用性はさておき、非常に面白いデザインのテキストボックスです。
※アルファベットのみの対応です
入力文字数に応じて欄が横に伸びていくテキストボックス。
See the Pen Dynamic Auto Size Input Box by silicon_hacker (@silicon_hacker) on CodePen.
入力した文字がキッチリと収まるようにテキストボックスの横幅が伸びていく入力欄です。
全体的なデザインやテキストボックスの形も斜め線が意識されていて奇抜で面白いです。
ポップなデザインのテキストボックス。フォーカスで左右が伸びる。
See the Pen Flat Google Search by Benjamin Gagne (@benague) on CodePen.
全体的にポップなデザイン・フォントのテキストボックスです。入力欄にフォーカスすると、テキストボックスの左右が伸びます。
入力文字がアニメーションするテキストボックス。
See the Pen
Fancy Animated Input Field by Andy Pagès (@andyNroses)
on CodePen.
モードを選択してテキストボックスに文字を入力すると、入力した文字がアニメーションします。
日本語は入力できないですし、実用性は低いかもしれないですが、非常にかっこいいサンプルです。
稲妻がビリビリ走る!
See the Pen
Thunder To Text by Vo Hai Dang (@haidang)
on CodePen.
電気がビリビリ走ってますね。
文字入力すると、入力した文字が電気で映し出されます。スゴイ!
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。