Geeth Welagedara Geeth Welagedara - 2 months ago 9
jQuery Question

How to change select menu background color after selected any option| not option color

i have

select option list
in my side panel and i just want to change select background color if the user selected any option. I don't want to change option colors. Simply i want to make as if user select any
option
, apply
mouse hover color
to background.

enter image description here to enter image description here



.nav-country-select:hover {
border: 1px solid #999;
background-color: #ced0cf;
}
.nav-country-select:focus {
outline: none !important;
}
.nav-country-select {
background-color: #e9ece5;
font-family: Arial, Times, serif;
color: #333333;
height: 35px;
border: 1px solid #bbbcbc;
}

<li>
<label class="label nav-label">Country</label>
<select class="btn nav-country-select" id="countrySelect" autocomplete="off">
<option value="1" selected>Doesn't Matter</option>
<option value="3">Australia</option>
<option value="4">New Zealand</option>
<option value="5">Middle East</option>
<option value="6">UK</option>
<option value="7">USA</option>
<option value="8">Canada</option>
<option value="9">India</option>
<option value="10">Other</option>
</select>
</li>




Answer

If js is allowed, try this.

$('#countrySelect').change(function() {
  if ($(this).val()) $(this).css('background', 'red');
  else $(this).css('background', '#e9ece5');
})
.nav-country-select:hover {
  border: 1px solid #999;
  background-color: #ced0cf;
}
.nav-country-select:focus {
  outline: none !important;
}
.nav-country-select {
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
  border: 1px solid #bbbcbc;
}
.nav-country-select option{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li>
  <label class="label nav-label">Country</label>
  <select class="btn nav-country-select" id="countrySelect" autocomplete="off">
    <option value="" selected>Doesn't Matter</option>
    <option value="3">Australia</option>
    <option value="4">New Zealand</option>
    <option value="5">Middle East</option>
    <option value="6">UK</option>
    <option value="7">USA</option>
    <option value="8">Canada</option>
    <option value="9">India</option>
    <option value="10">Other</option>
  </select>
</li>