BlogシェアTweetお問合せフォームをブラウザデフォルトのデザインのまま設置したりしていませんか?ユーザビリティを損なわず、デザイン性の高いカスタマイズ方法を紹介していきます。最低限のhtmlとcssで構成されたフォームです。入力から送信まで問題なく行えるのですが、野暮ったい印象を受けます。細部をカスタマイズできるように調整したフォームです。こちらのソースを元にカスタマイズしていきます。テキスト入力時枠の色を変更するデフォルトでは青色の枠ですが、cssで好きなデザインに変更できます。バリデーションの状態を表示するタグの最後に「required」を追加すると、簡単なバリデーションチェックができます。「送信ボタン」を押さずとも、入力した内容にエラーが出ていないかの確認をすることができます。矢印のアイコンを変更するブラウザごとの表示の差が激しいセレクトボックス。どのブラウザでも同じ矢印アイコンが表示されるように調整します。配色を変更することでまた違った印象になるかと思います。アイコンを変更するデフォルト状態のフォームが野暮ったく見える原因第1位(個人的な意見です)アイコンが変わるだけでも印象がだいぶ変わります。チェック時にアニメーションを付ける「押した!」感が出ます。アニメーションの盛り過ぎはしつこく見えるのでご利用は計画的に。ON/OFFスイッチにする(チェックボックス)アプリの設定画面でよく見るやつです。チェックボックスで実装してみました。確認・送信・戻るボタン確認画面でボタンの数が増えることを考慮して、上下左右にmarginを指定しておきます。input.back{background-color:#666;}いかがでしょうか?チェックボックスやラジオボタンはデフォルトよりクリックできる範囲が広がっているので、より使いやすくなっているかと思います。DATAPROTOP。