Html ≪Select≫ Selected Option Background-Color CSS Style

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>

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

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>