{background-color:色;}、{background-image:url(画像);}でフォームのボタンや入力欄に 背景色や画像を指定することが ことができます。

【ブラウザ表示】

<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" class="sample8" value="テキストフィールド">
</div>
<p>
<select name="se1" class="sample9">
<option value="動物1">犬</option>
<option value="動物2">猫</option>
</select>
</p>
<p>
<textarea name="area1" class="sample10" cols="28" rows="8">
テキストエリア
</textarea>
</p>
<p>
<input type="submit" value="送信" class="sample11">
</p>
</form>

input.sample8{background-color:yellow;}
select.sample9{background-color:purple;}
textarea.sample10{background-image:url(../image/ichigo.gif);}
input.sample11{background-color:fuchsia;}

<form method="POST" action="xxx.cgi">
<div>
<input type="text" name="text1" style="background-color:yellow;" value="テキストフィールド">
</div>
<p>
<select name="se1" style="background-color:purple;">
<option value="動物1">犬</option>
<option value="動物2">猫</option>
</select>
</p>
<p>
<textarea name="area1" style="background-image:url(../image/ichigo.gif);" cols="28" rows="8">
テキストエリア
</textarea>
</p>
<p>
<input type="submit" value="送信" style="background-color:fuchsia;">
</p>
</form>

■ その他の項目

スタイルシート一覧のページに戻る