使用CSS更改每个选项值的选择列表选项背景颜色

Question

我想更改每个选项值的选择列表选项的背景颜色，但它不起作用。

我不能给每个项目一个类，因为它是从核心脚本自动生成的。

有没有办法在不使用Javascript的情况下使用CSS3？

select option {
    margin:5px;
    color:#ffffff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
select option[val="blue-1"]{
    background: rgb(18,85,164);
    background-color:#1255a4 !important;
}
select option[val="black-2"]{
    background: rgb(37,40,42);
}

select option[val="pink-3"]{
    background: rgb(230,104,158);
}

select option[val="purple-4"]{
    background: rgb(100,40,255);
}
select option[val="yellow-5"]{
    background: rgb(245,210,40);
}

Answer 1

您需要使用value="..."，而不是val="..."。val不是一个超文本标记语言属性，而value是。

​

​

​

select option {
  margin:5px;
  color:#ffffff;
   text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
select option[value="blue-1"] {
  background: #1255a4;
}

select option[value="black-2"] {
  background: rgb(37,40,42);
}

select option[value="pink-3"] {
    background: rgb(230,104,158);
}

select option[value="purple-4"] {
    background: rgb(100,40,255);
}
select option[value="yellow-5"] {
    background: rgb(245,210,40);
}

<select>
  <option value="blue-1">Blue</option>
  <option value="black-2">Black</option>
  <option value="pink-3">Pink</option>
  <option value="purple-4">Purple</option>
  <option value="yellow-5">Yellow</option>
</select>

​