如何在選擇任何選項|後選擇菜單背景顏色而不是選項顏色

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

如何在選擇任何選項|後選擇菜單背景顏色而不是選項顏色

回答

相關問題