テキストボックスをおしゃれにするCSSスニペット10選。フォームのデザイン改善に。

2018年8月18日

フォームのデザインをかっこよくするテキストボックスの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 Simple Input Text Box With Icon by zFunx (@zFunx) on CodePen.

シンプルなデザインですが、テキストボックスに入力する内容がマークでわかるようになっていて、利便性が高いデザインです。

入力フォームをデザインする際には、このようなデザインアイデアも参考になるかと思います。

 

シンプルだが美しい入力フォーム一式。

See the Pen Form Component Design (inspired by Android) by Rudi Theunissen (@rtheunissen) 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.

全体的にポップなデザイン・フォントのテキストボックスです。入力欄にフォーカスすると、テキストボックスの左右が伸びます。

 

 

DesignCSS

Posted by KodoCode