如何从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选择对象中移除悬停颜色？

回答

相关问题