Add custom hover colours to

Question

I would like to add a custom hover colour and border to the option element using CSS only but I can't figure out how.

What I want it to look like:

What it looks like right now:

CSS:

option:hover {

    background-color: white;
    color: black;   

}

option {

background-color: black;
color: white;
outline: none;
border-left: 1px solid black;
border-right: 1px solid black;
border: none;   

}

option:focus {

border: none;
border-width: 0;
border-left: 1px solid black;
border-right: 1px solid black;
outline: none:

}

Any help would be greatly appreciated.

IMHO you shouldn't manipulate the browsers behaviour like that for design purposes. People are used to their browsers and may think, the page does not work or whatever. — iquellis, Dec 13 '17 at 19:37

Canica · Accepted Answer · 2018-07-06T04:56:36.450

0

Here's an option (no pun intended) which only works in Firefox: Change Select List Option background colour on hover

There is no cross-browser solution for what you are trying to accomplish.

edited Jul 06 '18 at 04:56

answered Dec 13 '17 at 19:28

Canica

2,650
3
18
34

Add custom hover colours to elements using and get rid of the blue outline CSS

1 Answers1

Add custom hover colours to