怎么修改select里面option的颜色

时间：2015-04-06 09:25:19 　来源：免费模板网　作者：风雪　阅读次数　tagscss运用

有时候看见别人网站的下拉列表的option有不同颜色感觉很个性，那么他是怎么实现的呢
CSS给Selcet下拉列表的选项增加背景色，看上去更醒目一些，加背景颜色实际也挺简单

代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>颜色框</title>
<style>
h1 {
  font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}
form p {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 5px;
}
form p label {
  float: left;
  width: 40%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}
.blue {
  background-color: #ADD8E6;
  color: #000000;
}
.red {
  background-color: #E20A0A;
  color: #ffffff;
}
.green {
  background-color: #3CB371;
  color: #ffffff;
}
.yellow {
  background-color: #FAFAD2;
  color: #000000;
}
</style>
</head>
<body>
<form method="post" action="example8.html">
  <p>
    <label for="color">Select your favorite color:</label>
    <select name="color" id="color">
      <option value="">Select One</option>
      <option value="blue" class="blue">blue</option>
      <option value="red" class="red">red</option>
      <option value="green" class="green">green</option>
      <option value="yellow" class="yellow">yellow</option>
    </select>
  </p>
  <p>
    <input type="submit" name="btnSubmit" id="btnSubmit" value="Send!" class="btn" />
  </p>
</form>
</body>
</html>

上篇：使用fieldset制作表单

下篇：表单里面使用inline属性

本文地址：https://www.freemoban.com/bjrm/2015/0406/1203.html

猜你喜欢