jquery – 为什么我的选择框拒绝改变Firefox中的背景颜色？

2019年8月4日 199次阅读

我已经仔细地仔细查看了这个问题的答案了几个小时,但却无法想出答案.

我有一个选择框,根据所选选项的背景颜色更改背景颜色.此功能适用于Chrome,但不适用于Firefox,无论您选择哪个选项,它都会变为蓝色并保持蓝色.所选选项的文本显示在选择中,但不显示在背景颜色中.

我已经尝试过使用css like :: selected {}.我最接近的是使用不同的StackOverflow答案来创建一个阴影框或在焦点改变时改变颜色,但到目前为止还没有真正的运气.

这是我的代码：

CSS：

#WHITE  {background-color: white;}
#GRAY   {background-color: rgb(194,194,194);}
#PINK   {background-color: rgb(255,153,203);}
#YELLOW {background-color: rgb(254,255,153);}
#ORANGE {background-color: rgb(255,204,154);}

jQuery的：

$(document).ready( function () {
    var color = $("option:selected", "#colorSlct").css("background-color");
    $("#colorSlct").css ("background-color", color);
});
$(document).on('change', '#colorSlct', function () {
    var color1 = $("option:selected", this).css("background-color");
    $("#colorSlct").css ("background-color", color1);
});

CSP：

<select id = "colorSlct" type = "select" class = "select2" style = "margin-left: 0;">
    <option id = "WHITE">  </option>
    <option id = "GRAY" #($s(color="GRAY":"selected='selected'",1:""))#> Gray </option>
    <option id = "PINK" #($s(color="PINK":"selected='selected'",1:""))#> Pink </option>
    <option id = "YELLOW" #($s(color="YELLOW":"selected='selected'",1:""))#> Yellow </option>
    <option id = "ORANGE" #($s(color="ORANGE":"selected='selected'",1:""))#> Orange </option>
</select>

任何提示将不胜感激.非常感谢您的帮助.

最佳答案 这似乎是当Firefox选择一个选项时,它将其背景颜色设置为蓝色,以使用CSS突出显示选择.您可以通过单击下拉箭头并看到所选元素确实是蓝色来查看此信息. (这可能是通过其他浏览器中的不同机制完成的,因此行为不同)

因此,每当您获得所选元素的背景颜色时,它将始终返回蓝色 – rgb(51,153,255).

解决方法是使用其他一些提示来告诉您要使用的颜色.

如果将ID更改为类,则可以执行以下操作：

function changeSel() {
    var selected = $("option:selected", "#colorSlct");
    $("#colorSlct").removeClass().addClass(selected[0].className);
}

changeSel()

$(document).on('change', '#colorSlct', changeSel);

演示：http://jsfiddle.net/jtbowden/63fnozyw/3/

当然,这假设选项只有一个类.您也可以使用ID进行查找,或同时使用类/ ID：

function changeSel() {
    var selected = $("option:selected", "#colorSlct");
    $("#colorSlct").removeClass().addClass(selected.attr("id"));
}

changeSel()

$(document).on('change', '#colorSlct', changeSel);

CSS：

#WHITE, .WHITE {
    background-color: white;
}
#GRAY, .GRAY {
    background-color: rgb(194, 194, 194);
}
// etc, etc

演示：http://jsfiddle.net/jtbowden/63fnozyw/4/

点赞