How to Change the Background Color of Dropdown List in Select Tag

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 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>

changing the background color of drop down box

You can click on the element, drop down box in your case and press F12 and look for developers tools. In developers tool, you can inspect that element and know the style sheet that is getting applied to the drop down box. For more information see this link:

https://www.hostinger.com/tutorials/website/how-to-inspect-and-change-style-using-google-chrome

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>

Change the background colour of Dropdown list depending on values using jQuery

Try this:

$(document).ready(function() {  $(".colorchg").each(function() {    $(this).css("background", $(this).val());  });  $(".colorchg").change(function() {    $(this).css("background", $(this).val());  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label class="col-lg-6">37.sample 1 </label><select class="form-control colorchg">  <option></option>  <option value="green">YES</option>  <option value="red">NO</option>  <option value="gray">N/A</option></select>
<label class="col-lg-6">38. sample 2</label><select class="form-control colorchg">  <option></option>  <option value="green">YES</option>  <option value="red">NO</option>  <option value="gray">N/A</option></select>
<label class="col-lg-6">39. sample 3</label><select class="form-control colorchg">  <option></option>  <option value="green">YES</option>  <option value="red">NO</option>  <option value="gray">N/A</option></select>