CSSフォーム

HTMLフォームの外観を大幅にCSSで改善することができます。

入力フィールドのスタイル

使用width入力フィールドの幅を決定するためのプロパティを。

上記の例では、すべてに適用される<input>要素。 あなたが唯一の特定の入力タイプのスタイルをしたい場合は、属性セレクタを使用することができます。

• input[type=text] -のみのテキストフィールドを選択します
• input[type=password] -のみのパスワードフィールドを選択します
• input[type=number] -数だけフィールドを選択します
• 等..

パッド入りの入力

使用paddingテキストフィールド内にスペースを追加するには、プロパティを。

ヒント：あなたがお互いの後に多くの入力を持っている場合、あなたはまた、いくつか追加することもできますmarginそれらの外側の領域を追加するには、：

	我々が設定されていることに注意してくださいbox-sizingにプロパティをborder-box 。 これは、パディングと、最終的に境界が要素の合計幅と高さに含まれていることを確認します。 もっと読むbox-sizing 、当社の不動産CSS3ボックスサイジングの章を。

フチ入力

使用するborder境界線のサイズと色を変更し、使用するようにプロパティをborder-radius角の丸いを追加するには、プロパティを：

あなただけの下の境界線が必要な場合は、使用border-bottomプロパティを：

着色入力

使用するbackground-color入力に背景色、および追加するには、プロパティをcolorテキストの色を変更するには、プロパティを：

集束入力

それは（をクリック）フォーカスを取得したときにデフォルトでは、一部のブラウザでは、入力の周りに青のアウトラインを追加します。 あなたが追加することで、この振る舞いを削除することができoutline: none;入力します。

使用:focusそれがフォーカスを取得したときの入力フィールドに何かをするセレクタ：

アイコン/画像と入力

あなたが入力内部アイコンをしたい場合は、使用するbackground-imageプロパティをし、それを位置付けるbackground-positionプロパティ。 また、我々は、アイコンのスペースを確保するために大規模な左パディングを追加することに注意してください：

動画検索入力

この例では、CSS3の使用transitionそれがフォーカスを取得した検索入力の幅をアニメーション化するプロパティを。 あなたはについての詳細を学びますtransition 、当社では、後でプロパティをCSS3トランジション章。

スタイリングテキストエリア

ヒント：使用してresize （右下隅にある「グラバー」を無効にする）にリサイズされるのテキストエリアを防ぐために、プロパティを：

スタイリングの選択メニュー

入力ボタンのスタイル

CSSでボタンのスタイルを設定する方法の詳細については、当社の読みCSSボタンのチュートリアルを 。