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

Question

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

至

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

＆＃13;

＆＃13;

$('#countrySelect').change(function() {
  if ($(this).val()) $(this).css('background', 'red');
  else $(this).css('background', '#e9ece5');
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将onchange添加到select;

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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