CSSの基本（20）

プルダウンメニューの背景色指定方法

プロダウンメニューの背景色や文字色を変えて、
分類や項目を選び易いように装飾します。

プルダウンメニューに背景色を付ける　⇒　option要素に　background-color:（色名）;
プルダウンメニューの文字色を変える　⇒　option要素に　color:（色名）;

<HTML>
<HEAD>

<style type="text/css">
<!--

option.separate {　　　　　　　　　　　　/* 分類用のデザイン(class-separate） */
background-color:#800000;　　　　　/* (class-separate）の背景色 */
color: #ffffff;　　　　　　　　　　　　　 　/*　(class-separate）の文字色 */
}
option.kinki {　　　　　　　　　　　　　　 /* 近畿地方項目のデザイン(class-kinki） */
background-color:#ffffcc;　　　　　　/* (class-kinki）の背景色 */
}
option.chugoku {　　　　　　　　　　　　/* 中国地方項目のデザイン(class-ghugoku） */
background-color:#ccffcc;　　　　　 /* (class-chugoku）の背景色 */
}

--></style>
</head>
<body>

<select>
<option>都道府県を選択して下さい：</option>
<option class="separate">近畿地方</option>
<option class="kinki">大阪府</option>
<option class="kinki">京都府</option>
<option class="kinki">兵庫県</option>
<option class="kinki">奈良県</option>
<option class="kinki">滋賀県</option>
<option class="kinki">和歌山県</option>
<option class="separate">中国地方</option>
<option class="chugoku">岡山県</option>
<option class="chugoku">広島県</option>
<option class="chugoku">鳥取県</option>
<option class="chugoku">島根県</option>
<option class="chugoku">山口県</option>
</select>
</center>
</body>
</html>


（画面クリックでWEB上のサイズを見てください。）