※スタイルシート、スタイル属性の詳しい解説は、「HTMLの解説」にあります。

■ 選択メニューの背景色を行単位で変更する

選択メニューはそれぞれの行がひとつのタグで構成されてます。
したがって、行単位にスタイル属性を指定することができます。

※選択メニューは解説書によって次のような呼び方があります。
 選択メニュー、セレクトメニュー、オプションメニュー、リストボックス

今回は、その点を利用し、行単位に背景色のスタイル属性を指定します。
背景色を変更する場合は、スタイル属性に次のように記述します。

スタイルシートスタイル属性の詳しい説明は、「HTMLの解説」−「15.スタイルシート」や「HTMLの解説」−「14.スタイル属性」を参照してください。

【記述サンプル】
background-color:(背景色);
選択メニュー
  リストボックス

文字色は、カラーコードでもカラー名でも指定することができます。
詳しくは、「HTMLの解説」−「3.背景色の決定」をご参照下さい。

また、下記のカラーサンプルも参考にしてください。
 カラーサンプル
 文字カラーピッカー
 背景カラーピッカー
 フル(全色)カラーピッカー

上記のサンプルは、それぞれ次のように記述しています。

【記述サンプル】
<select name="bcolor">   <option style="background-color:#000000">#000000</option>   <option style="background-color:#0000cc">#0000cc</option>   <option style="background-color:#00cc00">#00cc00</option>   <option style="background-color:#00cccc">#00cccc</option>   <option style="background-color:#cc0000">#cc0000</option>   <option style="background-color:#cc00cc">#cc00cc</option>   <option style="background-color:#cccc00">#cccc00</option>   <option style="background-color:#cccccc">#cccccc</option> </select>
【記述サンプル】
<select name="bcolor" size="6">   <option style="background-color:#000000">#000000</option>   <option style="background-color:#0000cc">#0000cc</option>   <option style="background-color:#00cc00">#00cc00</option>   <option style="background-color:#00cccc">#00cccc</option>   <option style="background-color:#cc0000">#cc0000</option>   <option style="background-color:#cc00cc">#cc00cc</option>   <option style="background-color:#cccc00">#cccc00</option>   <option style="background-color:#cccccc">#cccccc</option> </select>

page update:2019/01/09 19:55

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom