入力欄のサイズ入力欄の背景色 フォーカス時の背景色入力欄の境界線 入力欄の余白 フォームcss ﾘﾌｧﾚﾝｽ へ
フォーム部品の大きさ指定する(CSS)
width: *px; height: *px;
　width と height は、全てのタグ（要素）に適用できます。ただし、width は非置換インライン要素、tr要素、thead要素、tfoot要素、tbody要素には適用できません。また、height は非置換インライン要素、colgroup要素、col要素には適用できません。
　width は横幅を、height は高さを指定するプロパティです。このプロパティを<input>タグ（要素）、 <textarea>タグ（要素）、<select>タグ（要素）に設定すると、フォーム部品の大きさを指定できます。
　input, select { width: 150px; }   textarea { width: 150px; height: 100px; }
プロパティ名値説　　明
width 数値＋単位（px 等）
or パーセント		 フォーム部品の横幅を指定（初期値は auto）
height フォーム部品の高さを指定（初期値は auto）
width と height でサイズを指定した場合でも、<textarea>タグには cols属性と rows属性の指定が必要です。
　★ 使用例とブラウザでの表示 (i1-1)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .i1-1wid { width: 120px; }   .i1-1sub { width: 60px; }
.i1-1tex { width: 200px; height: 65px; }
使　用　例   ブラウザの表示
<form method=post action="exam.cgi">
お名前：<br><input type=text name=name class=i1-1wid>

好きな色：<br><select name=color class=i1-1wid>
<option value="#ffffff">white（白色）</option>
.... </select>

メッセージ：<br>
<textarea name=msg cols=25 rows=5 class=i1-1tex>
</textarea>

<input type=submit name=sub value=送信 class=i1-1sub>
</form>		 お名前：


好きな色：


メッセージ：


※サンプルのため送信不可
関連するページ
HTML タグページ 入力フォーム：入力フォームを作る
入力欄のサイズ入力欄の背景色 フォーカス時の背景色入力欄の境界線 入力欄の余白 フォームcss ﾘﾌｧﾚﾝｽ へ
フォーム部品の背景色を指定する(CSS)
background-color: ***;
　background-color は、全てのタグ（要素）に適用できます。
　background-color は、背景色を指定するプロパティです。このプロパティを<input>タグ（要素）、 <textarea>タグ（要素）、<select>タグ（要素）に設定すると、フォーム部品の背景色を指定できます。
　input, select, textarea { background-color: #f0f0f0; }
プロパティ名値説　　明
backGround-color カラーコード or カラーネーム 背景色を指定（初期値は transparent）
※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。カラーネームのページへ
　★ 使用例とブラウザでの表示 (i1-2)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .i1-2bgc { background-color: lightyellow; }
.i1-2sub { background-color: lightskyblue; }
使　用　例   ブラウザの表示
<form method=post action="exam.cgi">
お名前：<br><input type=text name=name class=i1-2bgc>

好きな色：<br><select name=color class=i1-2bgc>
<option value="#ffffff">white（白色）</option>
.... </select>

メッセージ：<br>
<textarea name=msg cols=25 rows=5 class=i1-2bgc>
</textarea>

<input type=submit name=sub value=送信 class=i1-2sub>
</form>		 お名前：


好きな色：


メッセージ：


※サンプルのため送信不可
関連するページ
HTML タグページ 入力フォーム：入力フォームを作る
Utilety Page (参考)カラーコード：「カラーネーム と カラーコード」へ
入力欄のサイズ入力欄の背景色 フォーカス時の背景色 入力欄の境界線入力欄の余白 フォームcss ﾘﾌｧﾚﾝｽ へ
フォーカス時の背景色を指定する(CSS)
(***:focus) background-color: ***;
　background-color は、全てのタグ（要素）に適用できます。
　background-color は、背景色を指定するプロパティです。このプロパティを疑似クラス（:focus）を指定した<input>タグ（要素）、 <textarea>タグ（要素）、<select>タグ（要素）に設定すると、フォーカス時の背景色を指定できます。
　input:focus, select:focus, textarea:focus { background-color: #f0f0f0; }
プロパティ名値説　　明
backGround-color カラーコード or カラーネーム 背景色を指定（初期値は transparent）
※ 色の指定は、カラーコード（#ffffff,#fff,rgb(255,0,0)）または、カラーネーム（red,blue）で行います。詳細は、「カラーネーム」のページをご覧下さい。カラーネームのページへ
Internet Exp.は表示モードが「標準モード」の場合のみ機能するようです（Internet Exp.7 以前は未対応）。
　★ 使用例とブラウザでの表示 (i1-3)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .i1-3fo:focus { background-color: mistyrose; }
.i1-3su:focus { background-color: lightskyblue; }
使　用　例   ブラウザの表示
<form method=post action="exam.cgi">
お名前：<br><input type=text name=name class=i1-3fo>

好きな色：<br><select name=color class=i1-3fo>
<option value="#ffffff">white（白色）</option>
.... </select>

メッセージ：<br>
<textarea name=msg cols=25 rows=5 class=i1-3fo>
</textarea>

<input type=submit name=sub value=送信 class=i1-3su>
</form>		 お名前：


好きな色：


メッセージ：


※サンプルのため送信不可
☆ 入力欄や送信ボタンをクリックすると背景色が変わります。
☆ Internet Exp.7 以前は、:focus に未対応です。
関連するページ
HTML タグページ 入力フォーム：入力フォームを作る
Utilety Page (参考)カラーコード：「カラーネーム と カラーコード」へ
Utilety Page (参考)疑似クラス：「疑似クラスの指定方法」へ
入力欄のサイズ入力欄の背景色 フォーカス時の背景色 入力欄の境界線入力欄の余白 フォームcss ﾘﾌｧﾚﾝｽ へ
フォーム部品の境界線を指定する(CSS)
border: ***;
　border は、全てのタグ（要素）に適用できます。
　border は、境界線の太さ、色、スタイルをまとめて指定するプロパティです。このプロパティを<input>タグ（要素）、 <textarea>タグ（要素）、<select>タグ（要素）に設定すると、フォーム部品に境界線を付けることができます。
　input, select, textarea { border: 1px blue solid; }
プロパティ名値　および　説　明
border:1px…線の太さ blue…線の色 solid…線のスタイル ;
初期値medium文字色の値 none 
＊ それぞれの値は、半角スペースで区切って記述します。
記述する順序は自由で、必要のない指定は省略できます。（省略した場合は初期値になります）
※ 境界線スタイルの指定を省略すると、境界線が表示されなくなります。境界線を表示する場合は、この指定を省略しないで下さい。
＊ 境界線の指定方法については、「境界線の太さ・色・スタイルをまとめて指定する」をご覧下さい。
Internet Exp.は、<select>タグ（要素）の「境界線の指定」に対応していないようです。
　★ 使用例とブラウザでの表示 (i1-4)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .i1-4dou { border: 3px blue double; }   .i1-4sub { border: 2px teal solid; }
使　用　例   ブラウザの表示
<form method=post action="exam.cgi">
お名前：<br><input type=text name=name class=i1-4dou>

好きな色：<br><select name=color class=i1-4dou>
<option value="#ffffff">white（白色）</option>
.... </select>

メッセージ：<br>
<textarea name=msg cols=25 rows=5 class=i1-4dou>
</textarea>

<input type=submit name=sub value=送信 class=i1-4sub>
</form>		 お名前：


好きな色：


メッセージ：


※サンプルのため送信不可
☆ Internet Exp.は、<select>タグ（要素）の「境界線の指定」に未対応です。
関連するページ
CSS スタイルシート境界線(纏)境界線の太さ・色・スタイルをまとめて指定する
HTML タグページ 入力フォーム：入力フォームを作る
入力欄のサイズ入力欄の背景色 フォーカス時の背景色入力欄の境界線 入力欄の余白 フォームcss ﾘﾌｧﾚﾝｽ へ
フォーム部品のパディング（内側の余白）を指定する(CSS)
padding: ***;
　このプロパティは、全てのタグ（要素）に適用できます。ただし、tr要素、thead要素、tfoot要素、tbody要素、col要素、colgroup要素には適用できません。
　padding は、上下左右のパディング（内側の余白）をまとめて指定するプロパティです。このプロパティを<input>タグ（要素）、 <textarea>タグ（要素）、<select>タグ（要素）に設定すると、フォーム部品内の余白を指定できます。
　input, select, textarea { padding: 4px 8px; }
プロパティ名値説　　明
padding 数値＋単位（px 等） or パーセント パディングの大きさを指定
　【指定方法】
　次の４タイプの指定方法があります。それぞれの値は、半角スペースで区切ります。
① padding: 2px; … 「上下左右」をまとめて指定
② padding: 2px 3px; … 「上下」と「左右」を指定
③ padding: 2px 3px 4px; … 「上」､「左右」､「下」を指定
④ padding: 2px 3px 4px 5px; … 「上」､「右」､「下」､「左」を指定（時計回り）
Internet Exp.は、<select>タグ（要素）の「パディングの指定」に対応していないようです。
　★ 使用例とブラウザでの表示 (i1-5)スタイルシートの書き方（基本）は、こちら です。
設定例 ： .i1-5ex { padding: 2px 8px; }   .i1-5sel { padding: 2px 0 2px 8px; }
使　用　例   ブラウザの表示
<form method=post action="exam.cgi">
お名前：<br><input type=text name=name
value=サンプル class=i1-5ex>

好きな色：<br><select name=color class=i1-5sel>
<option value="#ffffff">white（白色）</option>
.... </select>

メッセージ：<br>
<textarea name=msg cols=25 rows=5 class=i1-5ex>
サンプル</textarea>

<input type=submit name=sub value=送信 class=i1-5ex>
</form>		 お名前：


好きな色：


メッセージ：


※サンプルのため送信不可
☆ Internet Exp.は、<select>タグ（要素）の「パディングの指定」に未対応です。
関連するページ
HTML タグページ 入力フォーム：入力フォームを作る
入力欄のサイズ入力欄の背景色 フォーカス時の背景色入力欄の境界線 入力欄の余白 フォームcss ﾘﾌｧﾚﾝｽ へ