Asked  6 Months ago    Answers:  5   Viewed   34 times

I have a select box and I'm trying to change the background color of the options when the select box has been clicked and shows all the options.

See Fiddle

HTML:

<select>
    <option val="">Please choose</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>

CSS:

select{
    margin:40px;
    background: rgba(0,0,0,0.3);
    color:#fff;
    text-shadow:0 1px 0 rgba(0,0,0,0.4);
}

 Answers

96

You need to put background-color on the option tag and not the select tag...

select option {
    margin: 40px;
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

If you want to style each one of the option tags.. use the css attribute selector:

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}
<select>
  <option value="">Please choose</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>
Tuesday, June 1, 2021
 
employeegts
answered 6 Months ago
37

Unfortunately, you need to manually fire the change event. And using the Event Constructor will be the best solution.

var select = document.querySelector('#sel'),
    input = document.querySelector('input[type="button"]');
select.addEventListener('change',function(){
    alert('changed');
});
input.addEventListener('click',function(){
    select.value = 2;
    select.dispatchEvent(new Event('change'));
});
<select id="sel" onchange='alert("changed")'>
  <option value='1'>One</option>
  <option value='2'>Two</option>
  <option value='3' selected>Three</option>
</select>
<input type="button" value="Change option to 2" />

And, of course, the Event constructor is not supported in IE. So you may need to polyfill with this:

function Event( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
}
Wednesday, June 16, 2021
 
MGP
answered 6 Months ago
MGP
80

Try this:

.greenText{ background-color:green; }

.blueText{ background-color:blue; }

.redText{ background-color:red; }
<select
    onchange="this.className=this.options[this.selectedIndex].className"
    class="greenText">
     <option class="greenText" value="apple" >Apple</option>
    <option class="redText"   value="banana" >Banana</option>
    <option class="blueText" value="grape" >Grape</option>
</select>
Wednesday, June 30, 2021
 
Saurabh
answered 5 Months ago
97

It seems like it might be fundamental to how the browsers render video, and not an easy CSS/HTML fix. Your question sounds similar to this question. I am betting the answer lies in some combination of rendering engines and colorspace differences, which may mean there is no good way to fix it across browsers.

On firefox, you could try fiddling with color management settings to see if that changes the behavior. This won't fix the problem, but it could help explain it. In the URL/search bar, enter "about:config". It should take you to an options page. Another search bar will appear rendered in the page, enter "gfx.color_management.mode". That option can take values 0,1,2. Try switching them up and reloading the page (may need to restart firefox) to see if you can get a consistent difference. It's possible it won't make any difference if the color is not being managed in the first place though.

Similarly, you could try disabling hardware-accelerated video decode in chrome. Enter "chrome://flags" in the chrome URL/search bar, then find the flag "Disable hardware-accelerated video decode". Change whatever value it is, restart chrome, and check the colors again.

Neither of these are solutions I realize, this may have been better served as a comment, but I don't have the rep for that yet.

Sunday, August 1, 2021
 
Ujjawal Khare
answered 4 Months ago
50

See: http://jsfiddle.net/uDvEt/1/

.options > div:not(:first-child) select { background:yellow;}
Sunday, August 8, 2021
 
danjah
answered 4 Months ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share