html - CSS3 选择特定值时更改组合框颜色

Question

select[name="combo"] option[value="2"]:checked + select[name="combo"] {
  color: red;
}

<select name="combo">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>

如果您选择选项 2，我想更改 select(不是 option)颜色。我做错了什么。

谢谢

Answer 1

这不能单独使用 CSS 来完成。您必须使用 Javascript 才能使其正常工作 - CSS 不提供“父级”选择器。

CSS 中的 + 选择器适用于紧跟在另一个元素之后的元素，而不是在它里面。

Working jsFiddle : (使用 jQuery)

$('select').on('change',function(){
    var $this = $(this);
    switch($this.val()){
        case '2':
            $this.css('color','red');
            break;
        default:
            $this.css('color','black');
    }
});