如何在 Select 元素中设置所选项目的背景颜色？
Posted
技术标签:
【中文标题】如何在 Select 元素中设置所选项目的背景颜色？【英文标题】：How to set selected item background color in Select element? 【发布时间】：2016-09-08 10:13:39 【问题描述】：我在 Asp.net 页面中添加了一个 Select 元素，并在该元素内的每个选项上设置了 style="background-color: example_color"。正如answer 中所述。
当我调试网站并悬停选项时，它突出显示样式属性中指定的正确颜色，但在我选择它并标签到页面上的另一个元素后，背景颜色是正常的白色而不是蓝色或定义为绿色。
问题： 选择后如何设置选项颜色？
选择后选择元素：代码：
选择元素标记：
<div class="form-control">
<label class="col-md-3 control-label" for="Current Status">Status</label>
<div class="col-md-8">
<select id="Status" name="Status" onchange="" class="form-control">
<option style="background-color: blue" value="Down">Down</option>
<option style="background-color: green" value="BCR">BCR</option>
</select>
</div>
</div>
【问题讨论】：
这有帮助吗？ ***.com/questions/12836227/… 你可以在这篇文章中看到我对这个问题的回答：***.com/questions/36926663/…。 【参考方案1】：<select> 元素通常在任何类型的跨浏览器意义上都难以设置样式，因此请记住这一点，因为这可能不适用于所有浏览器。如果需要，您可能需要求助于第三方库，例如 select.css 或 this thread, which explicitly avoid javascript-based solutions 中的一些建议。
您可以使用选项中可用的background-color 属性在更改事件期间在父<select> 元素上设置显式样式属性，如下所示：
<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
<option style="background-color: blue!important" value="Down">Down</option>
<option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
function colorizeMe(element)
// Use the selected value to set the color
element.options[element.selectedIndex].style.backgroundColor
element.setAttribute('style','background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
</script>
示例和片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
<option style="background-color: blue!important" value="Down">Down</option>
<option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
function colorizeMe(element)
// Use the selected value to set hte color
element.options[element.selectedIndex].style.backgroundColor
element.setAttribute('style', 'background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
</script>
</body>
</html>【讨论】：
好的，您会推荐使用其他元素吗？这是一个 Asp Mvc 5 应用程序。我最终将传入一个类型化的对象列表，其中 color,name 值设置为视图。所以我希望将该颜色绑定到选项颜色而不是硬编码。 对于这种纯 CSS 方式的行为，可能没有比<select> 更好的选择了。如果您在 MVC 应用程序中使用 Bootstrap，那么您可以考虑使用像 bootstrap-select 这样的库，它可以是 handle this exact type of behavior as expected。以上是关于如何在 Select 元素中设置所选项目的背景颜色？的主要内容，如果未能解决你的问题，请参考以下文章