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!

[hamzaAmjad5163]

as this is showing arrow also, css for option selected, option hover,

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

select.form-control option:hover {
    background-color: var(--accent) !important;
}

select.form-control option:checked {
    background-color: var(--accent);
}

because of browser sometime you cannot see the hover effect on option.

same happens to me for some websites its work and for some its not