Html 所选选项的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18091866/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background color of selected option
提问by NightPharaoh
I'm writing a dropdown menu with several options and their colors. I have successfully colored the background of each option; however, once selected that background color doesn't show.
Is there a way to change this behavior? Example of my HTML below:
我正在编写一个包含多个选项及其颜色的下拉菜单。我已经成功地为每个选项的背景着色；但是，一旦选择该背景颜色就不会显示。
有没有办法改变这种行为？下面是我的 HTML 示例：
<select>
<option style="background-color: green">Successful</option>
<option style="background-color: orange">Process Failure</option>
<option style="background-color: purple">Abandoned</option>
</select>
or also here: http://jsfiddle.net/H8HVm/1/.
或者也在这里：http: //jsfiddle.net/H8HVm/1/。
Thanks!
谢谢！
回答by Dryden Long
Ok, so you can use Jquery to read the classof the selected optionthen set that classas the classof the <select>. Here is the code, followed by a fiddle...
好了，你可以使用jQuery读取class的选定option然后设置class为class的<select>。这是代码，然后是小提琴......
CSS
CSS
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.pink {
background-color: pink;
}
Jquery
查询
$("#color_me").change(function(){
var color = $("option:selected", this).attr("class");
$("#color_me").attr("class", color);
});
HTML
HTML
<select id="color_me" class="">
<option class="green">successful</option>
<option class="orange">process failure</option>
<option class="pink">abandoned</option>
</select>
Here's the fiddle: http://jsfiddle.net/DrydenLong/3QUN6/
这是小提琴：http: //jsfiddle.net/DrydenLong/3QUN6/
UPDATE
更新
Per request, here is a breakdown of my code above:
根据请求，这里是我上面代码的细分：
$("#color_me").change(function(){
This line calls function when the element with the idof "color_me" is changed. i.e. an option from the select list is chosen.
当具有id“color_me”的元素更改时，此行调用函数。即从选择列表中选择一个选项。
var color = $("option:selected", this).attr("class");
This defines the variable coloras whatever the classof the current selected optionis. The thisvariable is referring to the DOM element we referenced in the first line. Basically thisensures that we are getting the class from the correct <select>i.e. the <select>we just clicked on.
这将变量定义color为class当前选定的任何变量option。该this变量指的是我们在第一行中引用的 DOM 元素。基本上this确保我们从正确的类中获取类，<select>即<select>我们刚刚点击的类。
$("#color_me").attr("class", color);
});
This line assigns the colorvariable defined above as the classof the element with the idof #color_me.
这一行将color上面定义的变量分配为具有classof 的元素id的#color_me。
回答by Md Afsar Uddin
Hope This one'll help you.
希望这个能帮到你。
HTML
HTML
<div class="tt-select">
<select>
<option value="0">Options</option>
<option value="1">Option One</option>
<option value="2">Option Two</option>
<option value="3">Option Three</option>
<option value="4">Option Four</option>
</select>
</div>
CSS
CSS
.tt-select {
position: relative;
height: auto;
padding: 0px;
margin-bottom: 30px;
text-align: left;
}
.tt-select select {
display: none;
}
.select-selected {
background-color: #fff;
color: rgba(0, 0, 0, 0.8) !important;
}
.select-selected:after {
position: absolute;
content: "";
top: 14px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
}
.select-selected:before {
position: absolute;
content: "";
top: 18px;
right: 10px;
width: 0;
height: 0;
border: 6px solid transparent;
border-color: transparent transparent #000000 transparent;
transform: rotate(180deg);
}
.select-selected.select-arrow-active:before {
border: none;
}
.select-selected.select-arrow-active:after {
border-color: transparent transparent #000000 transparent;
top: 10px;
}
.select-items div,.select-selected {
color: #ffffff;
padding: 8px 16px;
border: 1px solid #333333;
cursor: pointer;
}
.select-items {
position: absolute;
background-color: #313131;
top: 100%;
left: 0;
right: 0;
z-index: 99;
}
.select-hide {
display: none;
}
.select-items div:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
JS
JS
var x, i, j, selElmnt, a, b, c;
x = document.getElementsByClassName("tt-select");
for (i = 0; i < x.length; i++) {
selElmnt = x[i].getElementsByTagName("select")[0];
a = document.createElement("DIV");
a.setAttribute("class", "select-selected");
a.innerHTML = selElmnt.options[selElmnt.selectedIndex].innerHTML;
x[i].appendChild(a);
b = document.createElement("DIV");
b.setAttribute("class", "select-items select-hide");
for (j = 0; j < selElmnt.length; j++) {
/*for each option in the original select element,
create a new DIV that will act as an option item:*/
c = document.createElement("DIV");
c.innerHTML = selElmnt.options[j].innerHTML;
c.addEventListener("click", function(e) {
var y, i, k, s, h;
s = this.parentNode.parentNode.getElementsByTagName("select")[0];
h = this.parentNode.previousSibling;
for (i = 0; i < s.length; i++) {
if (s.options[i].innerHTML == this.innerHTML) {
s.selectedIndex = i;
h.innerHTML = this.innerHTML;
y = this.parentNode.getElementsByClassName("same-as-selected");
for (k = 0; k < y.length; k++) {
y[k].removeAttribute("class");
}
this.setAttribute("class", "same-as-selected");
break;
}
}
h.click();
});
b.appendChild(c);
}
x[i].appendChild(b);
a.addEventListener("click", function(e) {
e.stopPropagation();
closeAllSelect(this);
this.nextSibling.classList.toggle("select-hide");
this.classList.toggle("select-arrow-active");
});
}
function closeAllSelect(elmnt) {
var x, y, i, arrNo = [];
x = document.getElementsByClassName("select-items");
y = document.getElementsByClassName("select-selected");
for (i = 0; i < y.length; i++) {
if (elmnt == y[i]) {
arrNo.push(i)
} else {
y[i].classList.remove("select-arrow-active");
}
}
for (i = 0; i < x.length; i++) {
if (arrNo.indexOf(i)) {
x[i].classList.add("select-hide");
}
}
}
document.addEventListener("click", closeAllSelect);
