Trying to change the option background color on hover in drop down select in CSS
.selector {
background-color: #252525;
color: #fff;
border: none;
border: 1px solid #595E57;
padding: 5px;
width: 150px;
overflow:hidden;
}
.selector option{
padding:5px;
}
.selector option:hover{
background-color: #1BA1E2 !important;
}
<select onfocus='this.size=10;' onchange='this.size=1; this.blur();' name="" class="selector">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
<option value="">Select4</option>
</select>
Can you change the background color of a select option on :hover in Microsoft Edge?
The <option>
elements are rendered by your OS and only a few style attributes that can be applied to it. For the detailed information, you can refer to this thread.
As you say if the select is set to multiple, the hoverover works, we can use the way that changing the <select>
to multiple when we select as a workaround. You can refer to the following sample:
option:hover {
background-color: yellow;
}
<select name="cars" id="cars" onfocus='this.size=4;' onblur='this.size=0;' onchange='this.size=1; this.blur();'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
How to change background color of an option tag when hovering?
The answer is no. Currently, in CSS3 there is no support for this. Perhaps in the next version, there will be.
However, there are alternatives...
The first alternative is making a custom dropdown menu with Bootstrap 5.
That alternative would look like this:
.wrapper {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.dropdown-menu li:nth-child(1) > a:hover {
background-color: pink;
}
.dropdown-menu li:nth-child(2) > a:hover {
background-color: blue;
}
.dropdown-menu li:nth-child(3) > a:hover {
background-color: yellow;
}
.dropdown-menu li:nth-child(4) > a:hover {
background-color: green;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="wrapper">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">Select</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdown">
<li><a class="dropdown-item" href="#">Volvo</a></li>
<li><a class="dropdown-item" href="#">Saab</a></li>
<li><a class="dropdown-item" href="#">VW</a></li>
<li><a class="dropdown-item" href="#">Audi</a></li>
</ul>
</div>
</div>
How to change the background color of a select option on hover
you can try something like this:
#select { width: 100px;}
select:hover { color: #444645; background: green; /* hover on select */}
select:focus>option:checked { background: yellow; /* selected */}
<select id="select"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option></select>
Change Select List Option background colour on hover in html
Currently there is no way to apply a css to get your desired result . Why not use libraries like choosen or select2 . These allow you to style the way you want.
If you don want to use third party libraries then you can make a simple un-ordered list and play with some css.Here is thread you could follow
How to convert <select> dropdown into an unordered list using jquery?
Related Topics
How to *Really* Justify a Horizontal Menu in Html+Css
Is Type="Text/Css" Necessary in a ≪Link≫ Tag
Why Should I Use 'Li' Instead of 'Div'
Do We Still Need Forward Slashes When Closing Void Elements in Html5
Change Cursor Type on Input Type="File"
Adding HTML Class Tag Under ≪Option≫ in Html.Dropdownlist
How to Position Two Elements Side by Side Using Css
How to Display Raw HTML Code in Pre or Something Like It But Without Escaping It
Assign an Initial Value to Radio Button as Checked
What Are the Allowed Tags Inside a ≪Li≫
Absolute Position Is Not Working
Xpath to Match @Class Value and Element Value