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

最新推荐文章于 2020-11-24 07:26:10 发布

原创最新推荐文章于 2020-11-24 07:26:10 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

表单同时被 2 个专栏收录

3 篇文章

订阅专栏

CSS

2 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

先给出效果图：

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

您可能感兴趣的与本文相关的镜像

AutoGPT

AI应用

AutoGPT于2023年3月30日由游戏公司Significant Gravitas Ltd.的创始人Toran Bruce Richards发布,AutoGPT是一个AI agent（智能体），也是开源的应用程序，结合了GPT-4和GPT-3.5技术，给定自然语言的目标，它将尝试通过将其分解成子任务，并在自动循环中使用互联网和其他工具来实现这一目标