如何在Select元素中设置选中项的背景颜色?
How to set selected item background color in Select element?
我已将 Select 元素添加到 Asp.net 页面,并在此元素内的每个选项上设置了 style="background-color: example_color"
。如本 answer.
所述
当我调试网站并将选项悬停时,它会突出显示样式 属性 中指定的正确颜色,但在我 select 它并切换到页面上的另一个元素后,背景颜色是正常的白色,而不是定义的蓝色或绿色。
问题:
select编辑后如何设置选项颜色?
- Select 元素 selected 后:
代码:
Select 元素标记:
<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>
<select>
元素通常在任何类型的跨浏览器意义上都很难设置样式,因此请记住这一点,因为这可能不适用于所有浏览器。如果需要,您可能需要求助于第三方库,例如 select.css or some of the suggestions in 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>
我已将 Select 元素添加到 Asp.net 页面,并在此元素内的每个选项上设置了 style="background-color: example_color"
。如本 answer.
当我调试网站并将选项悬停时,它会突出显示样式 属性 中指定的正确颜色,但在我 select 它并切换到页面上的另一个元素后,背景颜色是正常的白色,而不是定义的蓝色或绿色。
问题: select编辑后如何设置选项颜色?
- Select 元素 selected 后:
代码:
Select 元素标记:
<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>
<select>
元素通常在任何类型的跨浏览器意义上都很难设置样式,因此请记住这一点,因为这可能不适用于所有浏览器。如果需要,您可能需要求助于第三方库,例如 select.css or some of the suggestions in 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>