How to change color of selection in select option?
29,785
Solution 1
try this one maybe it will be helpful for you.
select{
margin:40px;
background: yellow;
color:#000;
text-shadow:0 1px 0 rgba(0,0,0,0.4);
}
option:not(:checked) {
background-color: #FFF;
}
HTML
<select>
<option val="">Select Option</option>
<option val="1">Option 1</option>
<option val="2">Option 2</option>
<option val="3">Option 3</option>
<option val="4">Option 4</option>
</select>
Demo JsFiddle: https://jsfiddle.net/hamzanisar/yfg8vdme/
Solution 2
Hope this is what you expected.
function ChangedSelection()
{
var x = document.getElementById("mySelect").selectedIndex;
var color =document.getElementsByTagName("option")[x].value;
var y = document.getElementById("mySelect");
y.style.color=color;
}
<select id="mySelect" onchange="ChangedSelection()" style="Color:red;">
<option value="red" selected="selected">Red</option>
<option value="blue">Blue</option>
<option value="Green">Green</option>
<option value="Yellow">Yellow</option>
</select>
Author by
Peter
Updated on February 12, 2021Comments
-
Peter over 3 years
I'm trying to change color of selection in select option. I was trying to do this:
option::selection {background: #ccc;} option::-moz-selection {background: #ccc;} option::-webkit-selection {background: #ccc; color:#fff;}
But it doesn't work. This works only for simple text, not to option. Is there any way to change color of selection? I dont need to change background of selected option. I need to change color of selection.
-
Peter almost 11 yearsNo, this works only for background of option itself. And I need to change directly color of selection, not color of option.