テキストボックスをおしゃれにするCSSスニペット16選。フォームのデザイン改善に。
フォームのデザインをかっこよくするテキストボックスのCSSサンプルをまとめました。
デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインの入力項目は利用者の興味を引き付けます。
本記事ではフォームの中でも「テキストボックス」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
テキストボックスは入力フォームの中でも基本のコントロールになりますので、デザインセットでのサンプルも掲載しております。
シンプルだが確実にテキストボックスの見栄えを良くするCSSデザイン例。
テキストボックスにフォーカスすると、ラベルが上に移動するシンプルなデザイン。
よく見るタイプのデザインです。
テキストボックスが未入力の場合は、テキストボックス内の透かしに項目ラベルが表示されています。テキストボックスにフォーカスして入力状態になると項目ラベルが上に移動します。
非常に見やすく機能性も高いデザインです。
非表示項目・ツールチップも考慮された項目ラベル移動型テキストボックス。
こちらも入力時に項目ラベルが上に移動するタイプのテキストボックスです。縮小しながらスムーズに上に移動する動作が素敵です。
さらに横には入力欄の説明を吹き出し表示するツールチップもありますし、テキストボックスが読み取り専用となった場合のデザインも用意されています。
全体的に非常に洗練されたデザインのCSSスニペットだと思います。
項目ラベルのブロックがスムースに動くテキストボックス。
項目ラベルがブロック形式になっていて、入力時には上に移動し、入力後は元に戻ります。
ラベルの長さに制限が出てきそうですけど、こちらも楽しい動作をするテキストボックスです。
フォーカスで色が変わるテキストボックス。
こちらも項目ラベルが移動するタイプのテキストボックスですが、同時にフォーカスで色が変わるようになっています。ちょっと奇抜な色のデザインですが、アイデアはとても良いです。
フォーカスで枠線上にラベルが浮き上がるテキストボックス。
テキストボックスの枠線の上に項目ラベルが移動します。入力欄っぽさがあって、こちらもステキなデザインです。
項目ラベルのアニメーションが楽しいテキストボックス。
テキストボックスの項目ラベル部分がフォーカスで動くタイプのデザインです。
いくつかバリエーションがあり、非常によく作られています。
input formセット一式で実用性が高いテキストボックスCSSデザイン例。
マークで入力欄の意味がわかるテキストボックス。
シンプルなデザインですが、テキストボックスに入力する内容がマークでわかるようになっていて、利便性が高いデザインです。
入力フォームをデザインする際には、このようなデザインアイデアも参考になるかと思います。
マークで入力欄の意味がわかるテキストボックス②。
こちらもマークで入力欄の意味がわかるようになっているinput form一式になります。
シンプルだが美しい入力フォーム一式。
こちらはテキストボックスだけでなく、入力フォーム一式が統一デザインで公開されています。シンプルですが利便性が高そうです。
各種コントロール一式が揃った入力フォームセット。
フォーカスで項目ラベルが上がるタイプのテキストボックスです。
文字列テキストボックス、数値テキストボックス、テキストエリア、日付カレンダー、セレクトボックスなど各種コントロール一式が揃っており、非常に参考になります。
フォーカス移動でアニメーションするテキストボックス。
フォーカス移動するとテキストボックスの周りのシャドウが移動するアニメーションをします。
フォーム一式でこういう仕掛けをするのも楽しいですね。
奇抜さ・意外性を重視した一風変わったテキストボックスCSSデザイン例。
タイピングしていくと、入力文字が生き物のように動き出すテキストボックス。
入力欄に文字入力していくと、文字が生き物のように動きながら入力されていきます。実用性はさておき、非常に面白いデザインのテキストボックスです。
※アルファベットのみの対応です
入力文字数に応じて欄が横に伸びていくテキストボックス。
入力した文字がキッチリと収まるようにテキストボックスの横幅が伸びていく入力欄です。
全体的なデザインやテキストボックスの形も斜め線が意識されていて奇抜で面白いです。
ポップなデザインのテキストボックス。フォーカスで左右が伸びる。
全体的にポップなデザイン・フォントのテキストボックスです。入力欄にフォーカスすると、テキストボックスの左右が伸びます。
入力文字がアニメーションするテキストボックス。
モードを選択してテキストボックスに文字を入力すると、入力した文字がアニメーションします。
日本語は入力できないですし、実用性は低いかもしれないですが、非常にかっこいいサンプルです。
稲妻がビリビリ走る！
電気がビリビリ走ってますね。
文字入力すると、入力した文字が電気で映し出されます。スゴイ！
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-checkbox/
