选择任何选项后如何更改选择菜单的背景颜色| 不是选项颜色

Question

我在侧面板中有select option list ，如果用户选择了任何选项，我只想更改选择背景颜色。 我不想更改选项颜色。 我只是想让用户好像选择任何option ，将mouse hover color应用于背景。

至

 .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

如果允许使用js ，请尝试此操作。

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

将onchange添加到选择中；

 .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

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

您可以仅向选项元素添加不同的背景颜色，以便每次看起来好像选择了某个选项时，select元素将具有不同的颜色

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