{font-size:値;}、{color:色;}でフォームのボタンや入力欄の文字のサイズや色を指定する
ことができます。
【ブラウザ表示】
ソース
<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" class="sample12" value="テキストフィールド">
</div>
<p>
<select name="se1" class="sample13">
<option value="動物1">犬</option>
<option value="動物2">猫</option>
</select>
</p>
<p> <textarea name="area1" class="sample14" cols="20" rows="8">
テキストエリア
</textarea> </p>
<p>
<input type="submit" value="送信" class="sample15"> </p>
</form>
外部ファイル
input.sample12{font-size:x-small;}
select.sample13{font-size:45%;}
textarea.sample14{color:green; font-size:130%;}
input.sample15{color:blue;}
<body>~</body>に直接記入する場合
<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" style="font-size:x-small;" value="テキストフィールド">
</div>
<p>
<select name="se1" style="font-size:45%;">
<option value="動物1">犬</option>
<option value="動物2">猫</option>
</select>
</p>
<p>
<textarea name="area1" style="color:green; font-size:130%;" cols="20" rows="8">
テキストエリア </textarea>
</p>
<p>
<input type="submit" value="送信" style="color:blue;"> </p>
</form>
■ その他の項目
・
ボタンや入力欄のサイズを変える
・
枠線の太さ、色、種類を指定する
・
背景色や画像を指定する
・
外側、部品の余白を指定する
・
フォームを並べる
・
入力欄の入力モードを変更する
・
フォームの部品の色を変える
スタイルシート一覧のページに戻る
|