替代

Question

我已经尝试了所有方法，每种方式都给一个给定颜色的下拉字段，使用一个单独的css链接，选项内的css样式等等。将它剥离下来，这样它们就没有框架，但仍然没有。我现在正在使用Bootstrap，这是我目前的代码，为下拉选项提供一种颜色，如果有人可以提供帮助那就太好了。正如您所看到的，第一个选项是使用给定的颜色作为测试，但没有成功：/

<div class="form-group">
  <label id="type" name="type" class=" control-label" for="textinput">Online Friend List Color</label>
  <div class="">
    <select id="type" name="type">

      <option class="red" style="background-color:#fff;color:#fff;" id="" name="" value="255, 0, 0">Red</option>
      <option id="type" name="type" value="255, 128, 0">Orange</option>
      <option id="type" name="type" value="255, 255, 0">Yellow</option>
      <option id="type" name="type" value="128, 255, 0">Lime</option>
      <option id="type" name="type" value="0, 255, 0">Green</option>
      <option id="type" name="type" value="0, 255, 255">Tequil</option>
      <option id="type" name="type" value="0, 128, 255">Light Blue</option>
      <option id="type" name="type" value="0, 0, 255">Dark Blue</option>
      <option id="type" name="type" value="127, 0, 255">Purple</option>
      <option id="type" name="type" value="255, 0, 255">Pink</option>
      <option id="type" name="type" value="0, 0, 0">Black</option>
      <option id="type" name="type" value="128, 128, 128">Grey</option>
      <option id="type" name="type" value="255, 255, 255">White</option>


    </select>
  </div>
</div>

Answer 1

你需要使用：

不同css的不同类，或
不同的ID，并由他们选择。

样本：

＆＃13;

#type0 {
  background: red;
}
#type1 {
  background: orange;
}
#type2 {
  background: yellow;
}
#type3 {
  background: lime;
}

＆＃13;

<div class="form-group">
  <label id="labelType" name="type" class=" control-label" for="textinput">Online Friend List Color</label>
  <div class="">
    <select id="type" name="type">
      <option id="type0" name="" value="255, 0, 0">Red</option>
      <option id="type1" name="type" value="255, 128, 0">Orange</option>
      <option id="type2" name="type" value="255, 255, 0">Yellow</option>
      <option id="type3" name="type" value="128, 255, 0">Lime</option>
    </select>
  </div>
</div>

＆＃13;

但是，这仅适用于Chrome，在某种程度上可以在Firefox中实现您的目标。否则，遗憾的是，没有用于为select元素设置样式的跨浏览器纯CSS解决方案。然而，另一种选择是创造＆＃39;你自己的选择元素：

＆＃13;

div {
  border: 2px solid purple;
  display:inline-block;
  border-radius: 5px;
  width:150px;
}
li {
  margin:0;
  list-style: none;
  list-style-type: none;
}
div > ul {
  display: none;
}
div:hover > ul {
  display: block;
  margin-left:-40px;
}

#one{background:red;}
#two{background:yellow;}
#three{background:blue;}

＆＃13;

<div>
  Select
  <ul>
    <li id="one">Red
    </li>
    <li id="two">Yellow
    </li>
    <li id="three">Blue
    </li>
  </ul>
</div>

＆＃13;

替代

为了保持＆＃39;选项标签，你可能会喜欢像jquery插件这样的东西：

example

Answer 2

＆＃13;

<div class="form-group">
  <label id="type" name="type" class=" control-label" for="textinput">Online Friend List Color</label>
  <div class="">
    <select id="type" name="type">
      <option style="background-color: #F00; color: #FFF;">Red</option>
      <option style="background-color: #0F0; color: #FFF">Green</option>
      <option style="background-color: #000; color: #FFF;">Black</option>
    </select>
  </div>
</div>

＆＃13;

对我来说很好。

但是：如果您想更改选择本身的颜色，我建议使用javascript检测<select>标签内的更改并更改颜色：

＆＃13;

<select style="background-color: #F00; color: #FFF;">
  <option style="background-color: #F00; color: #FFF;">Red</option>
  <option style="background-color: #0F0; color: #FFF">Green</option>
  <option style="background-color: #000; color: #FFF;">Black</option>
</select>
<!-- Some javascript stuff... -->

＆＃13;

编辑：

＆＃13;

<body>
    <script>
        function updateSelect(color) {
        	document.getElementById('select_color').style.backgroundColor = color;
        }
    </script>
    <select id="select_color" style="background-color: #F00; color: #888;" onchange="updateSelect(this.options[this.selectedIndex].id);">
      <option id="red" style="background-color: #F00; color: #888;">Red</option>
      <option id="lime" style="background-color: #0F0; color: #888">Green</option>
      <option id="black" style="background-color: #000; color: #888;">Black</option>
      <option id="white" style="background-color: #FFF; color: #888;">White</option>
    </select>
</body>

＆＃13;

现在应该可以正常工作：）

Html5颜色下拉列表无法正常工作

2 个答案:

替代