How to change color of selection in select option?

Question

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.

Why are you working with select? If you want some super cool styles you should start using html lists. — miksiii, Nov 27 '14 at 21:21
Possible duplicate of [How to change select box option background color?](http://stackoverflow.com/questions/12836227/how-to-change-select-box-option-background-color) — Deepak Yadav, Apr 14 '17 at 04:39
I don't believe there's a reliable solution that works across browsers/devices without using a library such as Select2. I'd suggest looking at this (stackoverflow post)[https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript] regarding styling of selects. — Levidps, Jan 14 '18 at 23:56

score 3 · Answer 1 · answered Mar 07 '16 at 05:55

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/

score 2 · Answer 2 · answered Dec 28 '14 at 10:46

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>

score 0 · Answer 3 · answered Jul 17 '13 at 11:16

0

try this

http://jsfiddle.net/zNTqm/287/

JAVASCRIPT

$('.mySelect').change(function () {
    $(this).find('option').css('background-color', 'transparent');
    $(this).find('option:selected').css('background-color', '#cccccc');
}).trigger('change');

HTML

<select class="mySelect">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
</select>

answered Jul 17 '13 at 11:16

Falguni Panchal

8,873
3
27
33

1

No, this works only for background of option itself. And I need to change directly color of selection, not color of option. – Peter Jul 17 '13 at 11:22

How to change color of selection in select option?

3 Answers3