CSS样式应用小实例(改变下拉列表选项颜色)

来源:互联网 发布:杭州g20知乎 编辑:程序博客网 时间:2024/03/28 23:10

先给出效果图:

<%@ 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;
}

 

版权所有:王勇