Question

我有这个代码的选择选项

<div id="selectedCat">
    <select id="selectCat" name="selectCat"style="background:none;border:none;" onchange="location= this.value;" >
        <option>what do yo looking for?</option>
        <option value= "cakes.php">cookies</option>
        <option value= "cupcakes.php"> cakes </option>
        <option value= "cookies.php"> cupcakes </option>
    </select>
</div>

和这些css：

#selectedCat select {position: absolute;
top: 32px;
left: 880px; width: 240px;height: 34px; border:0;background:none;-webkit-appearance: none; appearance:none;-moz-appearance:none;color: white;
font-size:20px;font-family:Arial, Helvetica, sans-serif;}

我想将选项的背景更改为这样的事情： enter image description here

Answer 1

您可以使用style或class属性设置options中的背景颜色：

<div id="selectedCat">
    <select id="selectCat" name="selectCat"style="background:none;border:none;" onchange="location= this.value;" >
    <option style="background-color:#ff0000;">what do yo looking for?</option>
    <option style="background-color:#ff0000;" value= "cakes.php">cookies</option>
    <option style="background-color:#ff0000;" value= "cupcakes.php"> cakes </option>
    <option style="background-color:#ff0000;" value= "cookies.php"> cupcakes </option>
    </select>
    </div>

如果您想使用class属性，它将如下所示：

<div id="selectedCat">
    <select id="selectCat" name="selectCat" style="background:none;border:none;" onchange="location= this.value;" >
    <option class="selectOption">what do yo looking for?</option>
    <option class="selectOption" value= "cakes.php">cookies</option>
    <option class="selectOption" value= "cupcakes.php"> cakes </option>
    <option class="selectOption" value= "cookies.php"> cupcakes </option>
    </select>
    </div>

css就像这样：

.selectOption {
 background-color:#ff0000;
}

Answer 2

只需添加此选项即可设置选项的背景颜色

#selectedCat option{
  background-color:tomato;
}

检查出来：

body{
  background-color:grey;
}
#selectedCat select {
  width: 240px;
  height: 34px;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
#selectedCat option{
  background-color:tomato;/* or something...*/
}

<div id="selectedCat">
  <select id="selectCat" name="selectCat" style="background:none;border:none;" onchange="location= this.value;">
    <option>what do yo looking for?</option>
    <option value= "cakes.php">cookies</option>
    <option value= "cupcakes.php"> cakes </option>
    <option value= "cookies.php"> cupcakes </option>
  </select>
</div>

Answer 3

不幸的是，你不能很好地设计这些样式。选择元素由操作系统呈现，而不是HTML，因此无法通过CSS设置样式（除了更改不具有不透明度的背景和字体颜色）。

可以使用其他方法，例如使用可以设置样式的元素来模拟与下拉列表相同的功能。

更改选择选项的背景

3 个答案: