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

本文链接：https://blog.youkuaiyun.com/wangwilliams/article/details/8205714

本文展示了一个简单的表单页面，包含颜色选择器和提交按钮，通过CSS样式实现颜色选择的即时反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先给出效果图：

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