CSS Targeting On Select Options Not Working

HTML & CSS
#1

Hi All

We’re attempting to edit the background colour and font on the select options on a form, you’ll see the title useage and first option “home office”

The site address is https://uk607.directrouter.com/~maxnwlgq/

We’re using the CSS selector option {
background: white;
color: #30556D;
font-weight: 500;
}

.elementor-13 .elementor-element.elementor-element-72c225d .elementor-field-group .elementor-select-wrapper::before {
color: #30556d;}

This works on firefox on mac but not chrome or safari, would someone be able to point out where we’re going wrong?

Many Thanks in advance

#2

You can’t style the option element in most browsers as its not available for styling. You can apply styles to the select itself such as background and fonts etc but not to individual options (apart from Firefox).

Therefore you can’t style individual options differently but you can apply styles to the select itself and all the options inherit those rules.

.elementor-13 .elementor-element.elementor-element-72c225d .elementor-field-group .elementor-select-wrapper select {etc..}