レイアウト、枠線、およびデザイン用のCSSスタイルフォーム

CSSでフォームのスタイルを設定する方法を学ぶことは、ウェブサイトの外観を改善するうえで最適です。 HTMLフォームは、おそらくほとんどのWebページで最も醜いものの1つです。彼らはしばしば退屈で実用的であり、スタイルの方法ではあまり提供しません。

CSSでは、それが変わることがあります。より高度なフォームタグとCSSを組み合わせると、見栄えの良いフォームを提供することができます。

色を変更する

テキストと同様に、フォーム要素の前景色と背景色を変更することができます。ほぼすべてのフォーム要素の背景色を変更する簡単な方法は、inputタグでbackground-colorプロパティを使用することです。たとえば、このコードはすべての要素に青い背景色（＃9cf）を適用します。

入力{ 背景色：＃9cf; 色：＃000;}

特定のフォーム要素の背景色を変更するには、テキストエリアを追加してスタイルを選択するだけです。例えば：

入力、テキストエリア、select { 背景色：＃9cf; 色：＃000;}

背景色を暗くする場合は、必ずテキストの色を変更してください。対照的な色は、フォーム要素を見やすくするのに役立ちます。たとえば、暗い赤色の背景色のテキストは、テキストの色が白い場合ははるかに簡単に読み取られます。たとえば、このコードは赤い背景に白いテキストを配置します。

入力、テキストエリア、select { 背景色：＃c00; 色：#fff;}

フォームタグ自体に背景色を付けることさえできます。フォームタグはブロック要素なので、要素の位置だけでなく、色が四角形全体に塗りつぶされることに注意してください。次のように、ブロック要素に黄色の背景を追加して領域を目立たせることができます。

形 { 背景色：#ffc;}

色と同様に、さまざまなフォーム要素の境界を変更することができます。フォーム全体に1つの枠線を追加することができます。パディングを追加してください。そうしないと、フォーム要素が境界線のすぐ上に詰まってしまいます。 5ピクセルのパディングを持つ1ピクセルの黒い境界のコードの例を次に示します。

形 { 国境：1px solid＃000; パディング：5px;}

フォーム自体だけでなく、周囲にも罫線を置くことができます。それらが目立つように入力項目の境界線を変更します。

入力{ border：2pxダッシュ＃c00;}

入力欄に罫線を入れると、入力欄のように見えなくなり、フォームに記入できると気付かない人がいることに注意してください。

あなたのフォームの要素を思考とCSSでまとめることで、サイトのデザインとレイアウトを補完する見栄えのよいフォームを設定できます。