我需要仅使用 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>`关于html - 如何仅使用 css 更改选择选项悬停背景颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34574430/