CSS を使用してフォーム ラベルのスタイルを設定する方法

CSS を使用してフォーム ラベルのスタイルを設定する方法。 Web ページ フォームのさまざまなフィールドや入力領域にラベルを付けるために使用されるフォーム要素は、label 要素です。 Cascading Style Sheet ルールを使用してスタイルを設定できます。

ステップ 1

導入部の画像に表示されるように label 要素のスタイルを設定するには、label 要素を「for」属性とともに使用する必要があります。さらに、「input」要素自体を追加する前に、label 要素を閉じる必要があります。図に示されている完全なフォームの HTML。

ステップ 2

ラベル要素のスタイルを設定するために、ラベルをブロック レベル要素として表示し、左にフロートさせました。次に、入力フィールドがすべてラベルから均一な距離になるように、ラベルに幅を割り当てました。色を割り当て、テキストを太字にしました。生成されたコンテンツを使用して、ラベルの後にコロン ( :) を追加しました。 (コロンはすべてのブラウザに表示されるわけではありません。)

CSS は次のとおりです。

ラベル { 色:#B4886B;フォントの太さ:太字;表示ブロック;幅:150px;フロート:左; } label:after { content:":" }

ステップ 3

完全を期すために、フィールドセットのスタイル設定に使用される CSS も示します。これは、ラベル要素が境界線付きのフィールドセットで囲まれているためです。

その CSS は次のとおりです:

fieldset { ボーダー:1px ソリッド #CCA383;幅:400px;背景:#FFE8EF;パディング:3px; } フィールドセットの凡例 { 背景:#CCA383;パディング:6px;フォントの太さ:太字; }

ステップ 4

ラベル要素のスタイルを設定するには、他にも多くのことができます。私の例は、それを行う 1 つの方法にすぎません。