您的位置：首页 > Web前端 > CSS

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

2012-11-20 22:01 239 查看
先给出效果图：



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

}

版权所有：王勇
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航