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

这似乎是当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进行查找，或同时使用class / 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/

Answer 2

创建与您的ID同名的类，然后每当您的select更改时，使用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

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

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

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

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

在我的情况下，该值是一个数字，如果您的值是其他值，则通过所选索引而不是值查找。

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

3 个答案: