How to set selected item background color in Select element?

Question

I have added a Select element to an Asp.net page and on each option inside this element I've set the style="background-color: example_color". As outlined in this answer.

When I debug the website and hover the option it is highlighted the correct color specified in the style property, but after I select it and tab to another element on the page, the background color is the normal white color and not the blue or green color defined.

Question: How can I set an option color after it's been selected?

Select element after it's selected:

Code:

Select element markup:

     <div class="form-control">
       <label class="col-md-3 control-label" for="Current Status">Status</label>
       <div class="col-md-8">
          <select id="Status" name="Status" onchange="" class="form-control">
             <option style="background-color: blue" value="Down">Down</option>
             <option style="background-color: green" value="BCR">BCR</option>
          </select>
       </div>
 </div>

does this help ? http://stackoverflow.com/questions/12836227/change-select-box-option-background-color — Renuka Deshmukh, May 12 '16 at 14:11
You can see my answer to that problem in this post: http://stackoverflow.com/questions/36926663/set-different-colors-in-aspdropdownlist-items/36927854#36927854. — ConnorsFan, May 12 '16 at 14:26

score 2 · Accepted Answer · edited May 23 '17 at 11:44

<select> elements are generally notoriously challenging to style in any kind of cross-browser sense, so keep that in mind as this may not work across all browsers. If you need that, you'll likely need to resort to a third-party library like select.css or some of the suggestions in this thread, which explicitly avoid Javascript-based solutions.

You could use the background-color property available on your options to set an explicit style attribute on the parent <select> element during change events as seen below :

<select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
         <option style="background-color: blue!important" value="Down">Down</option>
         <option style="background-color: green!important" value="BCR">BCR</option>
</select>
<script>
    function colorizeMe(element){
      // Use the selected value to set the color
      element.options[element.selectedIndex].style.backgroundColor
      element.setAttribute('style','background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
    }
</script>

Example and Snippet

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <select id="Status" name="Status" onchange="colorizeMe(this);" class="form-control">
    <option style="background-color: blue!important" value="Down">Down</option>
    <option style="background-color: green!important" value="BCR">BCR</option>
  </select>
  <script>
    function colorizeMe(element) {
      // Use the selected value to set hte color
      element.options[element.selectedIndex].style.backgroundColor
      element.setAttribute('style', 'background-color: ' + element.options[element.selectedIndex].style.backgroundColor + '!important;');
    }
  </script>
</body>

</html>

ok would you recommend a different element to use? It's an Asp Mvc 5 app.. I'm eventually going to pass in a typed object list with a {color,name} value set to the view. So I'm hoping to bind that color to the the option color instead of hard coding it. — Brian Var, May 12 '16 at 14:28

How to set selected item background color in Select element?

1 Answers1