主页 / 问题 / 662202
Accepted
cruim
Asked:2020-05-05 14:24:51 +0000 UTC2020-05-05 14:24:51 +0000 UTC

选择的背景颜色

  • 772

如何根据所选元素设置选择背景？例如，如果你这样做

#some-select option:first-child{
  background-color: #FFEBFA;
}

然后下拉列表中第一项的背景将发生变化。选择第一个元素时，有必要更改选择本身的背景。

javascript

1 个回答

  1. Best Answer

    目前这不能用 css 来完成，但在未来:has()伪类将可用，按计划，可以这样使用：

    select:has(> .red:checked)
{
    background: red;
}

    这意味着，如果 select 元素是所选元素的父元素，类为 red （在您的情况下，选项），那么我们将描述它的样式。

    https://drafts.c​​sswg.org/selectors-4/#relational

    使用 jquery 可以这样做：

    $('.select').change(function() {
		var selectedColor = $('.select option:selected').val();
		$('.select').css('background', selectedColor);
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="select">
        <option selected="selected" value="--">--</option>
        <option value="red">red</option>
        <option value="green">green</option>
        <option value="blue">blue</option>
        <option value="grey">grey</option>
    </select>

    • 2

相关问题