为什么我的选择框拒绝在 Firefox 中更改背景颜色？

Question

我已经非常仔细地寻找这个问题的答案好几个小时了，但一直没有找到答案。

我有一个选择框，可以根据所选选项的背景颜色更改背景颜色。此功能在 Chrome 中有效，但在 Firefox 中无效，无论您选择哪个选项，它都会变成蓝色并保持蓝色。所选选项的文本出现在选择中，但不显示背景颜色。

我已经尝试过使用 ::selected {} 之类的 CSS。我最接近的是使用不同的 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>

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

Answer 1

@Jeff B 指出这是一个 FireFox 缺陷，这是我为 FireFox 找到的解决方案：

我通常使用的快速解决方法是使用 value 属性作为我想要绘制选择的颜色，我目前遇到的问题是我的选择选项是从数据库中动态加载的，因此我需要 value 属性知道用户选择了哪个选项。

我为我的具体情况想出了这个 JavaScript/jQuery：

$('#mySelectID').change(function (){
    $('#mySelectID').css('background-color',document.getElementById('mySelectID').options[$('#mySelectID').val() - 1].style.backgroundColor);
});

在我的情况下，值是一个数字，如果你的值是其他值，那么通过选定的索引而不是值来查找。

Answer 2

创建与您的 ID 同名的类，然后每当您的选择发生更改时，使用 id 添加具有相应名称的类 - 当然是在删除所有先前的类之后。

试试看：JSFiddle Demo

jQuery

$(document).on('change', '#colorSlct', function() {
    $(this).removeClass().addClass($('option:selected').attr('id'));
});

CSS

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

编辑：

要在页面加载时填充下拉菜单时使其工作，您可以添加此代码以选择所选选项的 id 并添加其类。

var loadedColor = $('#colorSlct').find('option:selected').attr('id');
$('#colorSlct').addClass(loadedColor);

Updated Demo

Answer 3

这似乎是当 Firefox 选择一个选项时，它会将其 background-color 设置为蓝色，以使用 CSS 突出显示选择。您可以通过单击下拉箭头并看到所选元素确实是蓝色来看到这一点。 （这可能是通过其他浏览器中的不同机制完成的，因此行为不同）

因此，每当您获得所选元素的 background-color 时，它将始终返回蓝色 - 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/