CSS フォーム
- 前のページ CSS 属性セレクタ
- 次のページ CSS カウンタ
コース推薦：
Canada
使用 入力フィールドのスタイルを設定します width
例
属性を使用して入力フィールドの幅を決定します： width: 100%; }
input {
上記の例はすべての <input> 要素に適用されます。特定の入力タイプのスタイルのみを設定する場合は、属性選択子を使用できます：input[type=text]- テキストフィールドのみを選択しますinput[type=password]- パスワードフィールドのみを選択しますinput[type=number]- - 数字フィールドのみを選択します
など...
使用 フィールドにフィルリングを追加します。 padding
ヒント：属性を使用してテキストフィールド内にスペースを追加します。
例
input[type=text] {
width: 100%;
padding: 12px 20px;
Last Name
box-sizing: border-box;
}
margin: 8px 0; この章では、 注意してください、 属性を設定します。border-box
このようにすることで、要素の合計幅と高さには内側パディング（フィルリング）と最終的な枠線が含まれます。 CSS Box Sizing を含める方法について学びます。 この章では、 box-sizing
の属性の詳細について学習してください。
カラフルなフィールドを使用してください。 枠線付きのフィールド border 属性を使用して枠線の太さと色を変更し、 border-radius
例
input[type=text] {
属性を使用して角を丸くなります：
border-radius: 4px;
}
border: 2px solid red; 下側の枠線のみが必要な場合は、 border-bottom
例
input[type=text] {
border: none;
First Name
}
border-bottom: 2px solid red;
カラフルなフィールドを使用してください。 background-color 属性を使用してフィールドに背景色を追加し、 color 属性を使用してテキストの色を変更できます：
例
input[type=text] {
background-color: #3CBC8D;
color: white;
}
フォーカスを取得したフィールド
デフォルトでは、一部のブラウザはフィールドがフォーカスを取得（クリック）したときに周りに青い輪郭を追加します。フィールドに outline: none; この挙動を無効にします。
使用 :focus フィルタリングを選択すると、フィールドがフォーカスを取得したときにスタイルを設定できます：
例 1
input[type=text]:focus {
background-color: lightblue;
}
テキストボックス内をクリックしてください：
例 2
input[type=text]:focus {
border: 3px solid #555;
}
テキストボックス内をクリックしてください：
アイコン/画像付きの入力フィールド
入力フィールドにアイコンを含めたい場合は、 background-image 属性と、 background-position 属性を一緒に設定。また、アイコンのスペースを確保するために大きな左内余白（padding-left）を追加しています：
例
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
アニメーション付きの検索入力フィールド
この例では、CSSを使用して transition 属性を使用して、焦点を当てた検索入力フィールドの幅のアニメーションを設定します。その後、私たちの CSS フェードイン この章で学んだ transition 属性の知識。
例
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
テキストエリアのスタイルを設定
ヒント：使用 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;
}
/* ヒント：width: 100%を使用して全幅ボタンを実現 */
CSSでボタンのスタイルを設定する方法についてさらに詳しく知りたい場合は、以下を学んでください CSS ボタン チュートリアル。
レスポンシブメニュー
TIY エディタウィンドウのサイズを調整して効果を確認してください。スクリーンの幅が600ピクセル未満の場合、2つの列は左右ではなく上下に並べ替わります。
高度：次の例では、以下を使用します メディアクエリ レスポンシブフォームを作成するために、次の章でさらに多くの知識を学びます。
- 前のページ CSS 属性セレクタ
- 次のページ CSS カウンタ
