CSSを使用してフォームのスタイルを設定する方法：初心者向けガイド

アプリは、主にフォームを介してデータを収集します。たとえば、一般的な登録フォームを考えてみましょう。ユーザーが名前やメールアドレスなどの情報を入力するためのフィールドがいくつかあります。

昔、ウェブサイトには単純で退屈なHTMLフォームがありました。スタイルはありません。それはCSSがすべてを変える前でした。これで、CSSの最新機能を使用して、より面白くて活気のあるフォームを作成できます。

私の言葉だけではありません。以下は、CSSを使用しない場合の一般的なHTMLフォームの外観です。

これは、CSSを少し追加した同じフォームです。 。

このチュートリアルでは、上記のフォームを再作成する方法と、その他のすばらしいフォームをいくつか紹介します。視覚的に印象的でユーザーフレンドリーなフォームを作成するために実装できる変更。

CSSを使用してフォームのスタイルを設定する方法を6つのステップで示します。

1. box-sizing
2. 入力要素のCSSセレクター
3. テキスト入力フィールドの基本的なスタイル設定方法
4. 他の入力タイプのスタイル設定
5. UI疑似クラス
6. カスタマイズできない入力

詳しく説明する前に、フォームに特定のスタイルがないことを理解することが重要です。可能性はあなたの想像力によってのみ制限されます。このガイドは、CSSを使用して独自のデザインを作成する方法を開始するのに役立つことを目的としています。

始めましょう！

ボックスサイズの設定

私は通常、フォームだけでなくWebページにも* {box-sizing:border-box;}を設定します。設定すると、すべての要素の幅にパディングが含まれます。

たとえば、幅とパディングを次のように設定します。

.some-class { width:200px; padding:20px;}

box-sizing:border-boxのない.some-classの幅は200pxより大きくなります。問題になる可能性があります。そのため、ほとんどの開発者はすべての要素にborder-boxを使用しています。

以下はコードのより良いバージョンです。また、:beforeおよび:after疑似要素もサポートしています。

*, *:before, *:after { box-sizing: border-box;}

ヒント：*セレクターはドキュメント内のすべての要素を選択します。

入力要素のCSSセレクター

最も簡単な選択方法入力要素はCSS属性セレクターを使用します。

これらのセレクターは、ドキュメント内のすべての入力要素を選択します。セレクターを指定する必要がある場合は、要素にクラスを追加する必要があります。

<input type="text" class="signup-text-input" />

次に：

.signup-text-input { // styles here}

単一行のテキスト入力フィールドの基本的なスタイル設定方法

単一行のフィールドは、フォームで使用される最も一般的な入力フィールドです。通常、1行のテキスト入力は境界線のある単純なボックスです（これはブラウザによって異なります）。

プレースホルダーのある1行のフィールドのHTMLマークアップです。

<input type="text" placeholder="Name" />

次のようになります：

次を使用できますこの入力フィールドをより魅力的にするためのCSSプロパティ。

• パディング（内側の間隔を追加するため）
• マージン（入力フィールドの周囲にマージンを追加するため）
• 境界線
• ボックスシャドウ
• 境界線の半径
• 幅
• フォント

ズームしましょうこれらの各プロパティに入力します。

パディング

入力フィールドに内部スペースを追加すると、わかりやすくなります。これは、paddingプロパティを使用して実行できます。

input { padding: 10px;}

マージン

入力フィールドの近くに他の要素がある場合は、クラスタリングを防ぐためにその周囲にマージンを追加することをお勧めします。

input { padding:10px; margin:10px 0; // add top and bottom margin}

境界線

ほとんどのブラウザでは、テキスト入力フィールドに境界線があり、カスタマイズできます。

.border-customized-input { border: 2px solid #eee;}

境界線を完全に削除することもできます。

.border-removed-input { border: 0;}

ヒント：必ず境界線が削除されたときに背景色またはbox-shadowを追加します。そうしないと、ユーザーには入力が表示されません。

一部のWebデザイナーは、ノートブックの行に書くような感覚があるため、下の境界線のみを表示することを好みます。

.border-bottom-input { border:0; // remove default border border-bottom:1px solid #eee; // add only bottom border}

ボックスシャドウ

CSS box-shadowプロパティを使用してドロップシャドウを追加できます。プロパティの5つの値を試してみると、さまざまな効果を得ることができます。

input { padding:10px; border:0; box-shadow:0 0 15px 4px rgba(0,0,0,0.06);}

境界半径

border-radiusプロパティは、フォームの感触に大きな影響を与える可能性があります。ボックスの端を湾曲させることで、入力フィールドの外観を大幅に変更できます。

.rounded-input { padding:10px; border-radius:10px;}

box-shadowとborder-radiusを一緒に使用すると、別のルックアンドフィールを実現できます。

幅

widthプロパティを使用して入力の幅を設定します。

input { width:100%;}

フォント

ほとんどのブラウザは、フォーム要素に異なるフォントファミリとサイズを使用します。必要に応じて、ドキュメントからフォントを継承できます。

input, textarea { font-family:inherit; font-size: inherit;}

他の入力タイプのスタイル設定

次のような他の入力タイプのスタイル設定ができます。テキスト領域、ラジオボタン、チェックボックスなど。詳細を見てみましょう。

テキスト領域

テキスト領域は、複数行の入力が可能であることを除けば、テキスト入力と似ています。通常、コメントやメッセージなど、ユーザーからより長い形式のデータを収集する場合に使用します。前述のすべての基本的なCSSプロパティを使用して、テキスト領域のスタイルを設定できます。

resizeプロパティは、テキスト領域でも非常に役立ちます。ほとんどのブラウザでは、テキスト領域はデフォルトでx軸とy軸の両方に沿ってサイズ変更できます（値：both）。 both、horizontal、またはverticalに設定できます。

私がスタイルを設定したこのテキスト領域を確認してください：

CodePenで
Supun Kavinda（@SupunKavinda）のペン
dyomzezを参照してください。

この例では、resize:verticalを使用して、垂直方向のサイズ変更のみを許可しました。この方法は、煩わしい水平スクロールバーを防ぐため、ほとんどのフォームで使用されます。

注：自動サイズ変更テキスト領域を作成する必要がある場合は、JavaScriptアプローチを使用する必要があります。これはの範囲外です。この記事。

チェックボックスとラジオボタン

デフォルトのチェックボックスとラジオボタンはスタイルを設定するのが難しく、より複雑なCSS（およびHTML）が必要です。

スタイルを設定するにはチェックボックスで、次のHTMLコードを使用します。

<label>Name <input type="checkbox" /> <span></span></label>

注意事項：

• で<input>をラップし、<``label``>内の要素をクリックすると、<input>がクリックされます
• <input>は、ブラウザではあまり変更できないため、非表示にします
• <span>はカスタムチェックボックスを作成します
• input:checked疑似クラスセレクターを使用して取得しますチェックされたステータスとカスタムチェックボックスのスタイル

カスタムチェックボックスがあります（詳細については、CSSのコメントを参照してください）：

SupunKavindaによるペン
yLNKQBoを参照してください（ @SupunKavinda）
CodePenで。

カスタムラジオボタンは次のとおりです：

Supunのペン
eYNMQNMを参照してくださいKavinda（@SupunKavinda）
CodePen。

同じ概念（input:checked）を使用して、両方の例でカスタム要素を作成しました。

ブラウザでは、チェックボックスはボックス型で、ラジオボタンは丸いです。ユーザーを混乱させないように、カスタム入力ではこの規則を維持することをお勧めします。

メニューの選択

メニューの選択により、ユーザーは複数の選択肢からアイテムを選択できます。

<select>要素のスタイルを設定してより魅力的に見せることができます。

select { width: 100%; padding:10px; border-radius:10px;}

ただし、ドロップダウン（または<option>要素）はOSに応じてデフォルトでスタイル設定されるため、スタイル設定できません。これらの要素のスタイルを設定する唯一の方法は、JavaScriptでカスタムドロップダウンを使用することです。

ボタン

ほとんどの要素と同様に、ボタンにはデフォルトのスタイルがあります。

<button>Click Me</button>

これに少しスパイスを加えましょう。

UI疑似クラス

以下は、フォーム要素で一般的に使用されるいくつかのUI疑似クラスです。

これらは通知を表示するために使用できます。要素の属性に基づく：

• :required
• :validおよび:invalid
• :checked（すでにこれを使用しています）

これらは使用できます各状態に効果を作成するには：

• :hover
• :focus
• :active

：requiredで生成されたメッセージ

入力が必要であることをメッセージに表示するには：

属性では、"Required"メッセージが自動的に削除されます。

および:invalid疑似クラス。

：hoverおよび：focus

:hoverは、マウスポインタが要素の上にあるときに要素を選択します。 :focusは、フォーカスされたときに要素を選択します。

これらの疑似クラスは、遷移やわずかな視覚的変化を作成するためによく使用されます。たとえば、幅、背景色、境界線の色、影の強さなどを変更できます。これらのプロパティでtransitionプロパティを使用すると、これらの変更がはるかにスムーズになります。

フォーム要素に対するホバー効果がいくつかあります（要素にカーソルを合わせてみてください）。

CodePenのSupunKavinda（@SupunKavinda）による
yLNKZqgのペンを参照してください。

ユーザーが要素を見ると微妙に変化するそれらの上にカーソルを合わせると、要素が実行可能であるという感覚が得られます。これは、フォーム要素を設計する際の重要な考慮事項です。

（一部のブラウザでは）フォーム要素に焦点を合わせると青い輪郭が表示されることに気づきましたか？ :focus疑似クラスを使用して、それを削除し、要素がフォーカスされたときに効果を追加できます。

次のコードは、すべての要素のフォーカスアウトラインを削除します。

*:focus {outline:none !important}

フォーカスアウトラインを追加するには：

input:focus { background-color: #ffd969; border-color: #000; // and any other style}

検索入力を見たことがありますか焦点を合わせたときにスケールしますか？この入力を試してください。

CodePenのSupunKavinda（@SupunKavinda）によるペン
KKpoJJaを参照してください。

カスタマイズできない入力

フォーム要素のスタイリングは、歴史的に難しい問題でした。スタイリングをあまり制御できないフォーム要素がいくつかあります。例：

• <input type="color">
• <input type="file">
• <progress>
• <option>、<optgroup>、<datalist>

これらの要素はブラウザによって提供され、OSに基づいてスタイルが設定されます。これらの要素のスタイルを設定する唯一の方法は、div、spanなどのスタイル設定可能なHTML要素を使用して作成されたカスタムコントロールを使用することです。

たとえば、<input type="file">のスタイルを設定する場合、デフォルトの入力を非表示にしてカスタムボタンを使用できます。

フォーム要素のカスタムコントロールは次のとおりです。ほとんどの主要なJavaScriptライブラリ用に開発されました。それらはGitHubで見つけることができます。

結論

これで、単純なフォーム要素のスタイルを設定する方法と、ブラウザーの入力フィールドのスタイルを設定するのが難しい場合にカスタムコントロールを使用する方法を理解する必要があります。この投稿の冒頭で述べたように、これらはCSSフォームスタイリングの基本的な構成要素にすぎません。これらのヒントを基礎として使用して、想像力を駆使する必要があります。

最後のヒントとして、すべてのフォームをレスポンシブにすることを忘れないでください。

フォームデザインのインスピレーションをもっと探していますか？このCodePenコレクションを確認してください。