コピペ実装！CSSだけでフォームのUI改善**サンプルコード7選

「デザイン」の関連コンテンツ

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Webエンジニアのざきやまです！

ボタンCSS特集もそろそろネタがつきてまいりましたので..笑
本日はCSSのコピペだけで実装できるフォームのUI改善について紹介したいと思います！

Webサイトのコンバージョンとなることが多いフォームですが、見た目や配置、補助機能ひとつで入力完了率が大きく変わるところなので是非取り入れてみてくださいね(^^)/

各フォームのUIを変える

デフォルトのフォームパーツはブラウザによってデザインが変わってしまう為、デザインの統一感が失われたり使いづらかったりしてしまいます。
こちらのサンプルコードを使用するとグッとデザインが洗練されたものになり、ブラウザ間での見た目も統一されますよ！

こちらは特に変わったことはしていませんが、::placeholder を使って、プレイスホルダーの色を変更することが可能です！
デフォルトではフォーカス時に青い枠線が出てしまうので、outline: noneで消しています。

デフォルトだとチェック時の色は青色で、サイトによっては合わないこともあるでしょう。
こちらは枠線の色や大きさ、チェック時の色を自由に変更することができます。

こちらもラジオボタンと同様、枠線やチェック時の色を変更することができます。
大きさや::before、::afterをカスタマイズすればデザイン性の高いものも実現可能です♪

ブラウザによってデザインが大きく変わってしまうセレクトボックス！
矢印はもちろんブラウザによっては立体的な表示になってしまう為、デザイン性を大きく損ねてしまいます。矢印の部分は画像になっているので自由なデザインに変更可能です。

自分が入力しているフォームがどこまで続くのか分からない状態はユーザーに大きなストレスを与えてしまいます。「入力ステップナビ」を設けて、自分が今どの段階にいるかを可視化して安心感の向上をはかりましょう。

最後まで見ていただき、ありがとうございました！
フォームのデザイン変更はブラウザ対応などなかなか厄介ですが、是非こちらを使って洗練されたフォームを作成してみてください！それでは！

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。

Udemyを見る