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

Question

我的侧面板中有选择选项列表，如果用户选择了任何选项，我只想更改选择背景颜色。我不想更改选项颜色。只是我想让用户选择任何选项，将鼠标悬停颜色应用于背景。

至

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