CODEWITHSUNDEEP
htmlcsshtml-selectbackground-color
ngplayground
ngplayground

Reputation: 21667

Change select box option background color

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.

body {
  background: url(http://subtlepatterns.com/patterns/black_linen_v2.png) repeat;
}

select {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
<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>

Upvotes: 172

Views: 900708

Answers (7)

udidu
udidu

Reputation: 8588

You need to apply the background-color to the option elements and not the select element:

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 elements, use the CSS attribute selector. You can also use different class attributes for each <option>, if desired.

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>

Upvotes: 227

Charlie Dalsass
Charlie Dalsass

Reputation: 2014

If you really want to style the <options> within a <select>, consider switching to a Javascript/CSS based drop down such as http://getbootstrap.com/2.3.2/components.html#dropdowns or https://silviomoreto.github.io/bootstrap-select/examples/. This because browsers such as IE do not allow styling of options within <select> elements. Chrome/OSX also has this problem - you cannot style options.

However a warning is attached to that approach. These types of menus work very differently on mobile platforms because native elements aren't used. They can have annoying quirks on desktop as well. My advice is 1) don't write your own and 2) find a library that's been really well tested.

Upvotes: 2

rfoo
rfoo

Reputation: 1198

I don't know if you've considered it or not but if your application is based on coloring various groupings of items you should probably use the <optgroup> tag coupled with a class for further referencing. For example:

.green option {
  background-color: #0F0;
}

.blue option {
  background-color: #00F;
}
<select>
  <optgroup label="Numbers" class="green">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </optgroup>

  <optgroup label="Letters" class="blue">
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </optgroup>
</select>

Upvotes: 24

Jaykumar Patel
Jaykumar Patel

Reputation: 27624

Yes, you can set this by the opposite way:

select { /* desired background */ }
option:not(:checked) { background: #fff; }

Check it working bellow:

select {
  margin: 50px;
  width: 300px;
  background: #ff0;
  color: #000;
}

option:not(:checked) {
  background-color: #fff;
}
<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>

Upvotes: 25

Chintan
Chintan

Reputation: 19

$htmlIngressCss='<style>';
$multiOptions = array("" => "All");
$resIn = $this->commonDB->getIngressTrunk();
while ($row = $resIn->fetch()) {
    if($row['IsActive']==0){
        $htmlIngressCss .= '.ingressClass select, option[value="'.$row['TrunkInfoID'].'"] {color:red;font-weight:bold;}';
    }
    $multiOptions[$row['TrunkInfoID']] = $row['IngressTrunkName'];
}
$htmlIngressCss.='</style>';

add $htmlIngressCss in your html portion :)

Upvotes: 0

Bob Brunius
Bob Brunius

Reputation: 1380

My selects would not color the background until I added !important to the style.

    input, select, select option{background-color:#FFE !important}

Upvotes: 2

Travis
Travis

Reputation: 124

Another option is to use Javascript:

if (document.getElementById('selectID').value == '1') {
       document.getElementById('optionID').style.color = '#000';

(Not as clean as the CSS attribute selector, but more powerful)

Upvotes: 2

Related Questions