CSS设置七彩的下拉菜单
CSS不仅可以控制下拉菜单的整体字体和边框,而且,可以设置每一个选项的背景色和文字颜色。
首先,建立HTML部分,包括表单、下拉菜单、各个选项和按钮等等。
<span style="font-size:24px;"><html>
<head>
<title>
</title>
<style>
<!--
-->
</style>
</head>
<body>
<formmethod="post">
<p><labelfor="color">Select your favorite color:</label>
<selectname="color" id="color">
<optionvalue="">Select One</option>
<optionvalue="blue" class="blue">blue</option>
<optionvalue="red" class="red">red</option>
<optionvalue="green" calss="green">green</option>
<optionvalue="yellow" class="yellow">yellow</option>
<optionvalue="cyan" class="cyan">cyan</option>
<optionvalue="purple" class="purple">purple</option>
</select></p>
<p><inputtype="submit" name="btnSubmit" id="btnSubmit"value="Send!"></p>
</form>
</body>
</html></span>
此时,给每一个下拉选项添加CSS样式,主要是文字颜色,背景颜色的设置,代码如下:
<span style="font-size:24px;"><html>
<head>
<title>
</title>
<style>
<!--
.blue{
background-color:#7598fb;
color:#000000;
}
.red{
background-color:#e20a0a;
color:#ffffff;
}
.green{
background-color:#3cb371;
color:#ffffff;
}
.yellow{
background-color:#ffff6f;
color:#000000;
}
.cyan{
background-color:#00ffff;
color:#000000;
}
.purple{
background-color:800080;
color:#ffffff;
}
-->
</style>
</head>
<body>
<formmethod="post">
<p><labelfor="color">Select your favorite color:</label>
<selectname="color" id="color">
<optionvalue="">Select One</option>
<optionvalue="blue" class="blue">blue</option>
<optionvalue="red" class="red">red</option>
<optionvalue="green" calss="green">green</option>
<optionvalue="yellow" class="yellow">yellow</option>
<optionvalue="cyan" class="cyan">cyan</option>
<optionvalue="purple" class="purple">purple</option>
</select></p>
<p><inputtype="submit" name="btnSubmit" id="btnSubmit"value="Send!"></p>
</form>
</body>
</html></span>
可以看到每一项的背景颜色都变成了文字描述的颜色,而且,文字颜色的选取和背景色有一定的反差,以便浏览。