更改悬停时的选择列表选项背景颜色

是否可以在悬停时更改选择列表选项的默认背景颜色？

HTML:

<select id="select">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

我试过 option:hover { background-color: red; }，但是没有用。有人知道怎么做吗？

321654 次浏览
小开

Select / Option elements are rendered by the OS, not HTML. You cannot change the style for these elements.

小开

This can be done by implementing an inset box shadow. eg: 

select.decorated option:hover {
box-shadow: 0 0 10px 100px #1882A8 inset;
}

Here, .decorated is a class assigned to the select box.

Hope you got the point.

小开

this is what you need, the child combinator:

    select>option:hover
{
color: #1B517E;
cursor: pointer;
}

Try it, works perfect.

Here's the reference: http://www.w3schools.com/css/css_combinators.asp

小开

I realise this is an older question, but I recently came across this need and came up with the following solution using jQuery and CSS:

jQuery('select[name*="lstDestinations"] option').hover(
function() {
jQuery(this).addClass('highlight');
}, function() {
jQuery(this).removeClass('highlight');
}
);

and the css:

.highlight {
background-color:#333;
cursor:pointer;
}

Perhaps this helps someone else.

小开

Implementing an inset box shadow CSS works on Firefox:

select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}

Checked option item works in Chrome:

select:focus > option:checked {
background: #000 !important;
}

There is test on https://codepen.io/egle/pen/zzOKLe

For me this is working on Google Chrome Version 76.0.3809.100 (Official Build) (64-bit)

Newest article I have found about this issue by Chris Coyier (Oct 28, 2019) https://css-tricks.com/the-current-state-of-styling-selects-in-2019/

小开

The problem is that even JavaScript does not see the option element being hovered. This is just to put emphasis on how it's not going to be solved (any time soon at least) by using just CSS:

window.onmouseover = function(event)
{
console.log(event.target.nodeName);
}

The only way to resolve this issue (besides waiting a millennia for browser vendors to fix bugs, let alone one that afflicts what you're trying to do) is to replace the drop-down menu with your own HTML/XML using JavaScript. This would likely involve the use of replacing the select element with a ul element and the use of a radio input element per li element.

小开

This way 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>

小开

You can do this, just know that it will change all of the select inputs throughout the html, it doesn't change the blue hover, but it does style everything else.

option {
background: #1b1a1a !important;
color: #357b1d !important;
}
select {
background: #1b1a1a !important;
color: #357b1d !important;
}


// If you also want to theme your text inputs:
input {
background: #1b1a1a !important;
color: #357b1d !important;
}
小开 
<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>
小开

Select / Option elements are rendered by the OS/Client, not HTML. You cannot change the style for these elements in modern Browser.

On older clients

select option:checked,
select option:hover {
box-shadow: 0 0 10px 100px #000 inset;
}

Checked option item works in older Chrome:

select:focus > option:checked {
background: #000 !important;
}

提交答案