テキストボックスをおしゃれにするCSSスニペット16選。フォームのデザイン改善に。
フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。
シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。
テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。
See the Pen Animated Textbox by Stefan C. (@stefcharle) on CodePen.
よく見るタイプのデザインです。
テキストボックスが未入力の場合は、テキストボックス内の透かしに項目ラベルが表示されています。テキストボックスにフォーカスして入力状態になると項目ラベルが上に移動します。
非常に見やすく機能性も高いデザインです。
非表示項目・ツールチップも考慮された項目ラベル移動型テキストボックス。
See the Pen Material Design Inputs by Connor (@CKH4) on CodePen.
こちらも入力時に項目ラベルが上に移動するタイプのテキストボックスです。縮小しながらスムーズに上に移動する動作が素敵です。
さらに横には入力欄の説明を吹き出し表示するツールチップもありますし、テキストボックスが読み取り専用となった場合のデザインも用意されています。
全体的に非常に洗練されたデザインのCSSスニペットだと思います。
項目ラベルのブロックがスムースに動くテキストボックス。
See the Pen Textbox /Text Input field Inspiration (Pure CSS) by Aditya Bhandari (@takeradi) on CodePen.
項目ラベルがブロック形式になっていて、入力時には上に移動し、入力後は元に戻ります。
ラベルの長さに制限が出てきそうですけど、こちらも楽しい動作をするテキストボックスです。
フォーカスで色が変わるテキストボックス。
See the Pen TextBox by Jared Johnson (@jjohnson338) on CodePen.
こちらも項目ラベルが移動するタイプのテキストボックスですが、同時にフォーカスで色が変わるようになっています。ちょっと奇抜な色のデザインですが、アイデアはとても良いです。
フォーカスで枠線上にラベルが浮き上がるテキストボックス。
See the Pen Rise – Input Text Field Label Animation by Charlyn G (@charlyn) on CodePen.
テキストボックスの枠線の上に項目ラベルが移動します。入力欄っぽさがあって、こちらもステキなデザインです。
項目ラベルのアニメーションが楽しいテキストボックス。
See the Pen
Text input love by Michael Arestad (@MichaelArestad)
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スニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-checkbox/
