如何從html選擇對象中移除懸停顏色？

我試圖用一種簡單的顏色選擇器使用HTML/CSS只有四種顏色 - 迄今爲止很好。如何從html選擇對象中移除懸停顏色？

令人討厭的是，當您將鼠標懸停在下拉列表中的某個選項上時，由於懸停狀態而變爲藍色 - 但我似乎無法在css中禁用此選項。

我試過select:hover和option:hover屬性，但似乎沒有任何工作。如果不使用能夠達到相同效果的庫，有沒有其他替代方法？

function changeColor() { 
 
\t var c = this.options[this.selectedIndex].value; 
 
    document.getElementById("result").style.backgroundColor = c; 
 
} 
 

 
document.getElementById("colourPicker").addEventListener("change", changeColor);

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
#colourPicker { 
 
    width: 50px; 
 
} 
 

 
#result { 
 
    padding: 20px 20px 20px 20px; 
 
    border: 1px solid black; 
 
} 
 

 
.white { 
 
    background-color: #ffffff; 
 
} 
 

 
.red { 
 
    background-color: #ff0000; 
 
} 
 

 
.amber { 
 
    background-color: #ffa500; 
 
} 
 

 
.green { 
 
    background-color: #00b300; 
 
}

<div id="test"> 
 
Pick a colour: 
 
<select id="colourPicker"> 
 
    <option value="#ffffff" class="white"></option> 
 
    <option value="#ff0000" class="red"></option> 
 
    <option value="#ffa500" class="amber"></option> 
 
    <option value="#00b300" class="green"></option> 
 
</select> 
 
</div> 
 
<br><br> 
 
<div id="result"> 
 
<center>Result Colour</center> 
 
</div>

來源

2016-09-14 Macro Man

我不認爲你可以改變CSS本地下拉的行爲。你應該用HTML元素替換它，也許使用像Select2這樣的插件。 – Barmar

[在HTML中懸停更改選擇列表選項背景顏色]可能的副本（http://stackoverflow.com/questions/17740391/change-select-list-option-background-colour-on-hover-in-html） –

不要這樣做。請。別。在移動設備上，您所獲得的僅僅是空白選項，根本不指示它們的含義。只需使用''... –

除了您已經面臨的問題之外，當前的設計在移動設備上查看時完全分開。移動設備通常會提供一個特殊的用戶界面覆蓋圖，其中包含可用選項和每個選項的單選按鈕，在這種情況下，它只有四個空白選項。

請考慮使用...單選按鈕！您可以使用標籤來顯示顏色選項。例如...

.colourchoices>label { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    border-radius: 4px; 
 
    padding: 2px 4px 2px 2px; 
 
}

<p class="colourchoices"> 
 
    <label style="background-color:#ffffff"> 
 
    <input type="radio" value="#ffffff" name="col" />White 
 
    </label> 
 
    <label style="background-color:#ff0000;color:white"> 
 
    <input type="radio" value="#ff0000" name="col" /> Red 
 
    </label> 
 
    <label style="background-color:#ffa500;color:white"> 
 
    <input type="radio" value="#ffa500" name="col" /> Amber 
 
    </label> 
 
    <label style="background-color:#00b300;color:white"> 
 
    <input type="radio" value="#00b300" name="col" /> Green 
 
    </label> 
 
</p>

注意這個，你至於造型元素怎麼樣爲您提供更多的自由。

來源

2016-09-14 19:53:42

這是簡單而有效的這種替代方案，我希望。非常感謝 –

您目前不能風格下降的選項了。你有最好的選擇是使用一個無序列表和一些CSS魔術。檢查this列出

來源

2016-09-14 19:42:55

i'我會採取稍微不同的方法，但這基本上回答了我的問題，因爲這是不可能的。 –

總有不止一種方式來給一隻貓皮膚:)你可以像其他人所建議的那樣使用一個庫。但是，是的，目前它不能被塑造。每個瀏覽器呈現他們自己的方式... –

我試圖避免使用圖書館的東西如此微不足道，但事實上總有不止一種方式... :) –

如何從html選擇對象中移除懸停顏色？

回答

相關問題