How to set background-color for <select> and avoid styling in the <option>'s dropdo-CodePudding

I'm trying to style a <select> elements background-color on :hover and at the same time leave the styling of the <option> dropdown untouched. It seems to me that this issue occurs only in Firefox and not in Chrome/Safari.

Chrome select with background color

Firefox select with background color

This would be the code snippet. Please notice that I don't want to have the dropdown to be affected by the background-color in Firefox. Also: Not only the background color changes. Also the borders change. The whole "native" look gets lost as soon as I give the select a background-color.

select {
background-color: red;
}

<select><option>Option</option></select>

Thanks in advance.

CodePudding user response：

Why not to try to set the properties of the options in select too, something like:

select option{
background-color: blue;
}

CodePudding user response：

I think I've found a proper workaround.

We need to apply the hover color to a parent div and use :focus-within.

div:focus-within {
background: red;
}

select {
background: transparent;
border: 0;
}

<div><select><option>Option</option></select></div>