Change Shadow- and Hover-Color of Select/Dropdown

[devandreassimmeth]

Hi at all,

I can't find anything about how I can change the Shadow- and Hover-Color for dropdowns and selects in bootstrap 5.2, so I try my luck here.

At the moment my select looks like the following:

The result in the browser is the following:

What I want to reach is to switch the blue box-shadow, the blue option-hover and the options white hover-text-color to another color.

Has anyone of you an idea how to do this?
Thanks for your answers :)

[nkdas91]

Hi @devandreassimmeth

The blue box-shadow and the border can be updated using the CSS below, as an example, I have changed the box-shadow and border color to green.

.form-select:focus {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%);
}

Styling the <option> element is limited to color and background-color only. Read more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option#styling_with_css

.form-select option {
    background-color: #198754;
    color: #fff;
}

Hope this helps!

[devandreassimmeth]

Hey @nkdas91,

Thanks for your reply. I already found these parts since my blog entry last week. That there's no way to style the option in a whole is too bad. I hoped Bootstrap has something built-in to change this, like e.g. the panelClass property in Angular Material or a extension lib that provides something like that to Bootstrap.

But if that's not the case, I will see how I will deal with it.

[TonyFTannous]

Hi, how can change the background-color when hovering on a option (using chrome!!!, on firefox work normaly),

.form-select option:hover {
background-color: #198754;
color: #fff;
}

.form-select option:focus{
background-color: #198754;
color: #fff;
}

.form-select option:active{
background-color: #198754;
color: #fff;
}

all these doesn't work, please any help

[AhmadxAli]

First write like this in select tag than add css like this

<select onfocus='this.size=4;' onblur='this.size=0;' 
            onchange='this.size=1; this.blur();' >

---

select option:hover {
  box-shadow: 0 0 10px 100px red inset !important;
  color:white;
}
select option:checked{
  box-shadow: 0 0 10px 100px red inset !important;
  }

[prathamesh-voltup]

Thank you man!