フォーム部品を修飾したい。

スタイルシート編

フォーム部品の修飾は、スタイルシートを使います。（HTMLだけでは出来ません。）ただし、スタイルシートに対応していても

は完全ではないため修飾できません。個々に修飾したいこともあるので、ここではclass（クラス）によりスタイルを設定します。

対応状況

head部のソース

<head>
<style type="text/css">
<!--
select.navi {
	color:red;
	background-color:pink;
	font-size:15pt;
	font-weight:bold;
	font-style:italic;
} /* selectのスタイル */
option.new {
	color:blue;
	background-color:aqua;
} /* optionのスタイルnew */
option.cool {
	color:green;
	background-color:lime;
	font-size:25pt;
} /* optionのスタイルcool */
input.btn {
	color:#ff6633;
	background-color:yellow;
	font-size:25pt;
	font-weight:600;
	font-style:italic;
} /* inputのスタイルbtn */
-->
</style>
</head>

body内ソース

<body>
<form method="post" action="./"><!-- optionに更新履歴を記述します。optionのvalueにそのジャンプ先URL
を記述します。相対パス・絶対パスの区別なく動作します。 -->
<select multiple size="4" tabindex="1" class="navi" id="navi">
<option selected value="#contents">更新履歴</option>
<option value="../dhtml/index.html" class="new">2002年06月09日「DynamicHTML」のページ公開</option>
<option value="index.html" class="cool">2002年06月09日「Tips」のページ更新</option>
<option value="index.html">2002年05月23日「Tips」のページ公開</option>
<option value="../index.html#contents">2002年01月06日「トップページ」更新 
サイト内検索窓を設置</option>
<option value="../index.html#pagetop">2002年01月05日「トップページ」更新 
今日と昨日のカウンタを設置</option>
</select>
<input type=button tabindex="2" value="Go!" accesskey="g"
onClick="location.href = this.form.navi.options[this.form.navi.selectedIndex].value" 
onKeypress="location.href = this.form.navi.options[this.form.navi.selectedIndex].value" 
class="btn">
</form>
</body>

以降の場合 select エレメントのスタイル指定font-size、font-weight、font-style は option エレメントへ継承されますが、 option エレメントで再度font-size、font-weight、font-style指定をしても変更できません。の場合も以降の場合と同様ですが、color、background-colorの指定は出来ません。の場合も以降と同様ですがfont-styleの指定が出来ません。（ってゆーかLinuxの場合はフォントの指定はfont-weight位しか指定出来ません。）以降の場合は（sizeアトリビュートの指定は崩れてしまいますが）全て変更可能です。ですから私的に以降は非常に素直なので好きなブラウザです。表示

JavaScript(DOM)編

JavaScript でもスタイルシートのプロパティにアクセスしてフォーム部品の修飾が可能です。要するに JavaScript でスタイルシートを指定するだけです。ここでは

も対応するように document.all を入れてますが、option エレメントでエラーになります。

では効果は出ません。

は、フォーム部品には未対応（フォーム以外のものは対応してます）のようです。

対応状況

body内ソース

<body>
<form method="post" action="./"><!-- optionに更新履歴を記述します。optionのvalueにそのジャンプ先URL
を記述します。相対パス・絶対パスの区別なく動作します。 -->
<select multiple size="4" tabindex="1" id="navig">
<option selected value="#contents">更新履歴</option>
<option value="../dhtml/index.html" id="new">2002年06月09日「DynamicHTML」のページ公開</option>
<option value="index.html" id="cool">2002年06月09日「Tips」のページ更新</option>
<option value="index.html">2002年05月23日「Tips」のページ公開</option>
<option value="../index.html#contents">2002年01月06日「トップページ」更新 
サイト内検索窓を設置</option>
<option value="../index.html#pagetop">2002年01月05日「トップページ」更新 
今日と昨日のカウンタを設置</option>
</select>
<input type=button tabindex="2" value="Go!" accesskey="g"
onClick="location.href = this.form.navig.options[this.form.navig.selectedIndex].value" 
onKeypress="location.href = this.form.navig.options[this.form.navig.selectedIndex].value" 
id="btn">
<p><span id="black">このようにどのタグにも使えますよ。</span>ワハハ・・・</p>
</form>
<script type="text/JavaScript">
<!--
function modifyTag(tagID,fcolor,bgcolor,fsize,fweight,fstyle)
{
	if (document.all) modifyOBJ = document.all[tagID].style; //IE対応。
	if (document.getElementById) modifyOBJ = document.getElementById(tagID).style; //DOM対応。
	if (document.all || document.getElementById) //オブジェクトを修飾。
	{
		with(modifyOBJ)
		{
			color = fcolor;
			backgroundColor = bgcolor;
			fontSize = fsize;
			fontWeight = fweight;
			fontStyle = fstyle;
		}
	}
}
modifyTag("navig","red","pink","15pt","bold","italic");
modifyTag("new","blue","aqua","15pt","bold","italic");
modifyTag("cool","green","lime","25pt","bold","italic");
modifyTag("btn","#ff6633","yellow","25pt","600","normal");
modifyTag("black","white","black","10pt","lighter","normal");
//-->
</script>
</body>

サンプルのように引数を変更してやればどのタグにも使えます。また、これを応用してこの他のスタイルのプロパティにもアクセスしてみて下さい。スタイルシートのプロパティの-を取り除いて頭文字を大文字にすればそのまま JavaScript のプロパティとして使えます。例えば、font-size であれば、fontSize となります。表示

pokochan@mx1.tees.ne.jp