CSSフォーム
HTMLフォームの外観は、CSSを使用して大幅に改善できます。
入力フィールドのスタイリング
プロパティを使用してwidth、入力フィールドの幅を決定します。
例
input
{
width: 100%;
}
上記の例は、すべての<input>要素に適用されます。特定の入力タイプのみをスタイル設定する場合は、属性セレクターを使用できます。
input[type=text]-テキストフィールドのみを選択しますinput[type=password]-パスワードフィールドのみを選択しますinput[type=number]-数値フィールドのみを選択します- 等..
パッド入り入力
プロパティを使用してpadding、テキストフィールド内にスペースを追加します。
ヒント：次々に多くの入力がある場合はmargin、それらの外側にスペースを追加するために、いくつかを追加することもできます。
例
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
box-sizingプロパティを
に設定していることに注意してくださいborder-box。これにより、要素の幅と高さの合計にパディングと最終的には境界線が含まれるようになります。プロパティ
の詳細については、 CSSボックスのサイズ設定の章をご覧ください。box-sizing
境界入力
プロパティを使用しborderて境界線のサイズと色を変更し、プロパティを使用してborder-radius丸みを帯びた角を追加します。
例
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
下の境界線のみが必要な場合は、次のborder-bottomプロパティを使用します。
例
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
色付きの入力
プロパティを使用background-colorして入力に背景色を追加し、プロパティを使用しcolorてテキストの色を変更します。
例
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
焦点を絞った入力
デフォルトでは、一部のブラウザは、入力がフォーカスされる（クリックされる）と、入力の周りに青い輪郭を追加します。入力に追加することで、この動作を削除できoutline: none;ます。
セレクターを使用して、:focusフォーカスを取得したときに入力フィールドで何かを実行します。
例
input[type=text]:focus
{
background-color: lightblue;
}
例
input[type=text]:focus
{
border: 3px solid #555;
}
アイコン/画像で入力
入力内にアイコンが必要な場合は、プロパティを使用して、background-imageプロパティとともに配置しbackground-positionます。また、アイコンのスペースを予約するために大きな左パディングを追加していることに注意してください。
例
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
アニメーション検索入力
この例では、CSStransitionプロパティを使用して、フォーカスを取得したときに検索入力の幅をアニメーション化します。
transitionプロパティについて詳しくは、CSSトランジションの章をご覧ください。
例
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Textareasのスタイリング
ヒント：このプロパティを使用しresizeて、テキスト領域のサイズが変更されないようにします（右下隅の「グラバー」を無効にします）。
例
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
選択メニューのスタイリング
例
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
入力ボタンのスタイリング
例
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
CSSを使用してボタンのスタイルを設定する方法の詳細については、CSSボタンのチュートリアルを参照してください。
レスポンシブフォーム
ブラウザウィンドウのサイズを変更して、効果を確認します。画面の幅が600ピクセル未満の場合は、2つの列を隣り合わせではなく積み重ねます。
詳細：次の例では、メディアクエリを使用してレスポンシブフォームを作成します。これについては、後の章で詳しく説明します。