How To Apply Background-color To A Selected Option?
Solution 1:
You can use jQuery to read the class
of the selected option
then set that class
as the class
of the <select>
. Here is the code, followed by a fiddle:
$("#color_me").change(function(){
var color = $("option:selected", this).attr("class");
$("#color_me").attr("class", color);
});
.green {
background-color: green;
}
.orange {
background-color: orange;
}
.pink {
background-color: pink;
}
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><selectid="color_me"class=""><optionclass="green">successful</option><optionclass="orange">process failure</option><optionclass="pink">abandoned</option></select>
Here's the JSFiddle: http://jsfiddle.net/DrydenLong/3QUN6/
Per request, here is a breakdown of my code above:
$("#color_me").change(function(){
This line calls function when the element with the id
of "color_me" is changed. i.e. an option from the select list is chosen.
var color = $("option:selected", this).attr("class");
This defines the variable color
as whatever the class
of the current selected option
is. The this
variable is referring to the DOM element we referenced in the first line. Basically this
ensures that we are getting the class from the correct <select>
i.e. the <select>
we just clicked on.
$("#color_me").attr("class", color);
});
This line assigns the color
variable defined above as the class
of the element with the id
of #color_me
.
Solution 2:
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");
});
}
functioncloseAllSelect(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);
.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-itemsdiv,.select-selected {
color: #ffffff;
padding: 8px16px;
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-itemsdiv:hover, .same-as-selected {
background-color: rgba(0, 0, 0, 0.1);
}
<divclass="tt-select"><select><optionvalue="0">Options</option><optionvalue="1">Option One</option><optionvalue="2">Option Two</option><optionvalue="3">Option Three</option><optionvalue="4">Option Four</option></select></div>
Here is a CodePen link.
Solution 3:
This code works for me:
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>
$(document).ready(function(){
$("select").change(function(){
var color = $("option:selected", this).attr("class");
$(this).attr("class", color);
});
});
</script>
Post a Comment for "How To Apply Background-color To A Selected Option?"