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

我有我的侧面板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>

来源

2016-09-29 Geeth Welagedara

你想检查用户是否选择了此下拉菜单中的某个元素，并在此网站上永久更改颜色？ –

@PatrickMlr是的..在侧面板中有许多选择项目。 –

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

来源

2016-09-29 06:07:18

平变化添加到选择;

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

来源

2016-09-29 06:08:32 Laazo

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

来源

2016-09-29 06:11:40

-1

你可以只添加不同的背景颜色选项元素，因此每次它看起来像如果选择一些选项，选择元素都会有不同的颜色

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

来源

2016-09-29 06:13:26 Phoenix

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

回答

相关问题