CODEWITHSUNDEEP
css
shubhra
shubhra

Reputation: 41

How to change browser's default hover background-color?

I have used following solutions..

select:hover {
color: #444645;
background: #ddd;
}

And

select option:hover {
color: #444645;
background: #ddd;
}

But it didn't work. Please help me with your solutions. Thanks.

Upvotes: 1

Views: 4178

Answers (3)

Paul van den Dool
Paul van den Dool

Reputation: 3212

The style of a select component is browser AND OS specific. So it's different across Chrome, Firefox, IE, etc. AND Windows and Mac.

I'm afraid you can't style the dropdown.

You can style the select box as shown here, but the dropdown is a no go.

If you really want a custom dropdown, I'm afraid you'll have to resort to using javascript.
Here's a basic tutorial on creating one.

Upvotes: 1

pekechis
pekechis

Reputation: 388

The first one works at least Chrome and Firefox

select:hover {
color: #444645;
background: #ddd;
}

Try it at:

https://codepen.io/pekechis/pen/LyNMea

Upvotes: 0

gnzg
gnzg

Reputation: 370

Can you elaborate some more on the context? Maybe provide the html file you were working on?

Right now you are adding behavior to a <select> element. If it is the page's background you are trying to change, you will need to target the <body> tag.

Upvotes: 0

Related Questions