如何仅使用CSS更改选择选项的悬停背景颜色? [英] How to change select options hover background color using only css?
本文介绍了如何仅使用CSS更改选择选项的悬停背景颜色?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要仅使用CSS来更改选择选项，将鼠标悬停在背景颜色上.
I need to change select options hover background color using only css.
Please check the link : https://jsfiddle.net/bilashcse/k2o783rp/
我的代码:
HTML:
<div>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
CSS:
select {
margin: 50px;
border: 1px solid #111;
background: transparent;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
select option:hover{
background:red !important;
}
推荐答案
我们可以进行最少的更改.
We can do this with minimal changes.
<html>
<head>
<style>
option:hover{background-color:yellow;}
</style>
</head>
<body>
<select onfocus='this.size=10;' onblur='this.size=0;'
onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</body>
</html>`这篇关于如何仅使用CSS更改选择选项的悬停背景颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
