CSS样式应用小实例（改变上拉列表选项颜色）
日期：2014-05-17 浏览次数：20590 次
先给出效果图：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<html>
<head>
<link rel="stylesheet" href="./mycss.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>表单练习</title>
</head>
<body>
<p align="center">
<font size="14" face="宋体" color="#ff00ff">
表单练习页面
</font>
</p>
<form method="post">
<p><label for="color">请选择一种颜色</label>
<select name="color" id="color">
<option value=""> 选择 </option>
<option value="blue" class="blue"><blue>蓝色</blue></option>
<option value="red" class="red"><red>红色</red></option>
<option value="green" class="green"><green>绿色</green></option>
<option value="yellow" class="yellow">黄色</option>
<option value="cyan" class="black">黑色</option>
<option value="purple" class="purple">紫色</option>
</select></p>
<p><input type="submit" name="btnSubmit" id="btnSubmit" value="提交"></p>
</form>
</body>
</html>
CSS文件：mycss,css
@CHARSET "UTF-8";
option.blue{
color:#ffffff;
background-color: #0000ff;
}
option.red{
color:#ffffff;
background-color: #ff0000;
}
option.green{
color:#ffffff;
background-color: #008000;
}
option.yellow{
color:#ffffff;
background-color: #ffff00;
}
option.black{
color:#ffffff;
background-color: #000000;
}
option.purple{
color:#ffffff;
background-color: #800080;
}
版权所有：王勇
