How to Set The Background Color of <Option> in a <Select> Element

Change select box option background color

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>

How to change the background color of a select option on hover

you can try something like this:

#select {  width: 100px;}
select:hover {  color: #444645;  background: green;  /* hover on select */}
select:focus>option:checked {  background: yellow;  /* selected */}

<select id="select">  <option value="1">One</option>  <option value="2">Two</option>  <option value="3">Three</option></select>

Changing the background color of the selected options in a select box

It is not possible to do this with HTML/CSS. The colors of the select elements are Operating System specific and so cannot be changed with CSS or HTML. Javascript solutions have been developed and they're (so far) the only way to do it :)

How to change the select option background color

Simply set the background via CSS.

select {
    background: red;
}

<div class="form-group ">
        <select class="form-control >
           <option  value="mechanical">Mechanical</option>
           <option  value="cs">Computer Science</option>
           <option  value="civil">Civil</option>
           <option  value="agricultural">Agricultural</option>
       </select>
    </div>

How to apply background color to only selected option in select tag

Is this what you are looking for? It isn't polished at all just wanted to see if this is the basic behavior that you're describing that you can't figure out.

.form {
  height: 50vh;
  width: 50vw;
  background: #333;
  color: #fff;
  margin: 0 auto;
  padding: 2rem;
}

.field-select {
  border-radius: 5px;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.field-select > option {
  color: initial !important;
}

<div class="form">
  <div class="field">
    <label>What is your house type? <span>(Required)</span></label>
    <div>
      <select class="field-select" aria-required="true" aria-invalid="false">
        <option value="" selected="selected" class="field-placeholder">Select</option>
        <option value="Detached House">Detached House</option>
        <option value="Semi-Detached House">Semi-Detached House</option>
        <option value="Mid-Terrace House">Mid-Terrace House</option>
        <option value="End-Terrace House">End-Terrace House</option>
        <option value="Detached Bungalow">Detached Bungalow</option>
        <option value="Semi-Detached Bungalow">Semi-Detached Bungalow</option>
        <option value="Flat">Flat</option>
        <option value="Other">Other</option>
      </select>
    </div>
  </div>
</div>

Set background color of <option> in <select>

From comments on the question above...

I'm using latest Chrome on Mac.

Aye, there's the rub. (To be honest, I'm actually quite surprised that the links provided work on my Windows workstation. Historically styling a <select> and some other form elements has been a pipe dream.)

Some form elements more so than others, and very much so for <select> elements, rely heavily on native OS functionality. Note how a standard <select> with no styling at all looks very different on a Mac than on Windows or Linux for example. And in this case it sounds like the native OS functionality simply doesn't support styling here.

For the most compatability your best bet is probably to use a JavaScript plugin (jQuery has many if you're not against using jQuery, other frameworks have other options if you're already using something) to display a stylized menu from an existing <select>. Or if you're ambitious you can write your own. But the native functionality is at the whim of the OS and will likely continue to be for some time.

How can I set the background color of <option> in a <select> element?

select.list1 option.option2
{
    background-color: #007700;
}

<select class="list1">
  <option value="1">Option 1</option>
  <option value="2" class="option2">Option 2</option>
</select>

---

Related Topics