change the background of select options

Question

i have a select options with this code

<div id="selectedCat">
    <select id="selectCat" name="selectCat"style="background:none;border:none;" onchange="location= this.value;" >
        <option>what do yo looking for?</option>
        <option value= "cakes.php">cookies</option>
        <option value= "cupcakes.php"> cakes </option>
        <option value= "cookies.php"> cupcakes </option>
    </select>
</div>

and these css:

#selectedCat select {position: absolute;
top: 32px;
left: 880px; width: 240px;height: 34px; border:0;background:none;-webkit-appearance: none; appearance:none;-moz-appearance:none;color: white;
font-size:20px;font-family:Arial, Helvetica, sans-serif;}

i want to change the background of options to somthing like this: enter image description here

You can just parse the colour in your style tag for each option, as in — Rotimi, Feb 17 '17 at 08:17
Possible duplicate of [How to style the option of a html "select"?](http://stackoverflow.com/questions/7208786/how-to-style-the-option-of-a-html-select) — Jon, Feb 17 '17 at 09:33

dns_nx · Answer 1 · 2017-02-17T08:30:25.067

You can use the style or class property for setting the background color in the options:

<div id="selectedCat">
    <select id="selectCat" name="selectCat"style="background:none;border:none;" onchange="location= this.value;" >
    <option style="background-color:#ff0000;">what do yo looking for?</option>
    <option style="background-color:#ff0000;" value= "cakes.php">cookies</option>
    <option style="background-color:#ff0000;" value= "cupcakes.php"> cakes </option>
    <option style="background-color:#ff0000;" value= "cookies.php"> cupcakes </option>
    </select>
    </div>

If you want to use class property, it will look like this:

<div id="selectedCat">
    <select id="selectCat" name="selectCat" style="background:none;border:none;" onchange="location= this.value;" >
    <option class="selectOption">what do yo looking for?</option>
    <option class="selectOption" value= "cakes.php">cookies</option>
    <option class="selectOption" value= "cupcakes.php"> cakes </option>
    <option class="selectOption" value= "cookies.php"> cupcakes </option>
    </select>
    </div>

And the css like this:

.selectOption {
 background-color:#ff0000;
}

score 0 · Answer 2 · answered Feb 17 '17 at 08:48

Just add this to set the options' background color

#selectedCat option{
  background-color:tomato;
}

Check it out:

body{
  background-color:grey;
}
#selectedCat select {
  width: 240px;
  height: 34px;
  border: 0;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  -moz-appearance: none;
  color: white;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}
#selectedCat option{
  background-color:tomato;/* or something...*/
}

<div id="selectedCat">
  <select id="selectCat" name="selectCat" style="background:none;border:none;" onchange="location= this.value;">
    <option>what do yo looking for?</option>
    <option value= "cakes.php">cookies</option>
    <option value= "cupcakes.php"> cakes </option>
    <option value= "cookies.php"> cupcakes </option>
  </select>
</div>

score 0 · Answer 3 · answered Feb 17 '17 at 09:45

Unfortunately you can't style these very well. The select element is rendered by the OS, not HTML therefore it can't be styled by CSS (other than changing background and font color without opacity).

Other methods can be used such as using elements which can be styled to mimic the same functionality as a dropdown.

change the background of select options

3 Answers3