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

Question

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.

to

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

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> 

Answer 2

Add onchange to the select;

 .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" onchange="this.style.background = 'gray'" 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 3

Use Jquery .

  $("#countrySelect").change(function() { $(".nav-country-select").css("background-color","#2b67c6"); }); 

  .nav-country-select { background-color: #e9ece5; font-family: Arial, Times, serif; color: #333333; height: 35px; border: 1px solid #bbbcbc; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 4

 $('#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> 

Answer 5

You can just add a different background color to option elements so everytime it looks like if some option is selected , select element will have a different color

select>option{
 background-color: #ced0cf;
}