How to Colour Backgrounds of Selected Items in HTML Select Options with CSS Only

Can I colour backgrounds of selected items in HTML select options with CSS only?

Instead of only setting a background-color you can also set a linear-gradient as background:

option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

This works in IE11 and latest Chrome and Firefox. Safari just ignores it. Did not test IE/Edge.

If you want to set the background color only for focused multi-selects you can use this snippet:

select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

See the full demo here: http://codepen.io/marceltschopp/pen/PNyqKp

HTML select selected option background-color CSS style

You may not be able to do this using pure CSS. But, a little javascript can do it nicely.

A crude way to do it -

var sel = document.getElementById('select_id');
sel.addEventListener('click', function(el){
    var options = this.children;
    for(var i=0; i < this.childElementCount; i++){
        options[i].style.color = 'white';
    }
    var selected = this.children[this.selectedIndex];
        selected.style.color = 'red';
    }, false);

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>

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>

styling background of selected option

Complete code: Change background of selected
option

Actually, you cannot style all CSS properties on :checked option elements. color , background-color doesn't work directly so you have to use background instead.

HTML:

<div class="body">
    <select size="7" class="form-control" id="subjects">
        <option>one</option>
        <option>two</option>
        <option>three</option>
    </select>
</div>

CSS:

.body > select option:checked { 
    background: linear-gradient(0deg, black 0%, black 100%);
    background: -moz-linear-gradient(0deg, black 0%, black 100%);
    background: -webkit-gradient(0deg, black 0%, black 100%);
}

Change Color of Selected Option in select multiple

select[multiple]:focus option:checked {  background: red linear-gradient(0deg, red 0%, red 100%);}

<select multiple>  <option value="1">one</option>  <option value="2" selected>two</option>  <option value="3">three</option></select>

How can I change the color of the select Tag dependent on the option chosen (using pure JavaScript)?

You can do something like this:

var select = document.getElementById('primaryColor')
select.onchange = () => {

  // Initial color
  let color = 'white'

  // Check background color and change font color accordingly
  if (select.value == '#fff') color = 'black'

  select.style.cssText = `
        background-color: ${select.value};
        color: ${color};
        border: 3px solid #333;
      `
}

/* <select> styles */

select {
  /* Reset */
  appearance: none;
  border: 0;
  outline: 0;
  font: sans-serif;
  /* Personalize */
  width: 100%;
  max-width: 100%;
  position: relative;
  color: #fff;
  background-color: #aaaaaa;
  font-size: 16px;
  text-align: center;
  height: 50px;
  line-height: 30px;
  display: block;
  cursor: pointer;
  border: 3px solid transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

select option {
  color: white;
  background-color: gray;
}

select:focus {
  outline: none;
}

option:checked {
  background-color: #1abc9c;
}

select::-ms-expand {
  display: none;
}

<select class="parent" id="primaryColor">
  <option class="child" selected disabled hidden>
    Choose a color
  </option>
  <!-- Set value as the hex color -->
  <option class="child" value="#fff">White</option>
  <option class="child" value="#000">Black</option>
  <option class="child" value="#f00">Red</option>
  <option class="child" value="#0f0">Green</option>
  <option class="child" value="#00f">Blue</option>
  <option class="child" value="#204">Purple</option>
</select>

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 background color of an option tag when hovering?

The answer is no. Currently, in CSS3 there is no support for this. Perhaps in the next version, there will be.

However, there are alternatives...

The first alternative is making a custom dropdown menu with Bootstrap 5.

That alternative would look like this:

.wrapper {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown-menu li:nth-child(1) > a:hover {
  background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
  background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
  background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
  background-color: green;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<div class="wrapper">
  <div class="btn-group">
    <button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
    <ul class="dropdown-menu" aria-labelledby="defaultDropdown">
      <li><a class="dropdown-item" href="#">Volvo</a></li>
      <li><a class="dropdown-item" href="#">Saab</a></li>
      <li><a class="dropdown-item" href="#">VW</a></li>
      <li><a class="dropdown-item" href="#">Audi</a></li>
    </ul>
  </div>
</div>