Change select box option background color
You need to put background-color
on the option
tag and not the select
tag...
select option {
margin: 40px;
background: rgba(0, 0, 0, 0.3);
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}
If you want to style each one of the option
tags.. use the css attribute
selector:
select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);}
select option[value="1"] { background: rgba(100, 100, 100, 0.3);}
select option[value="2"] { background: rgba(150, 150, 150, 0.3);}
select option[value="3"] { background: rgba(200, 200, 200, 0.3);}
select option[value="4"] { background: rgba(250, 250, 250, 0.3);}
<select> <option value="">Please choose</option> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option></select>
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>
How to change the select option background color
Simply set the background via CSS.
select {
background: red;
}
<div class="form-group ">
<select class="form-control >
<option value="mechanical">Mechanical</option>
<option value="cs">Computer Science</option>
<option value="civil">Civil</option>
<option value="agricultural">Agricultural</option>
</select>
</div>
Set background color of option in select
From comments on the question above...
I'm using latest Chrome on Mac.
Aye, there's the rub. (To be honest, I'm actually quite surprised that the links provided work on my Windows workstation. Historically styling a <select>
and some other form elements has been a pipe dream.)
Some form elements more so than others, and very much so for <select>
elements, rely heavily on native OS functionality. Note how a standard <select>
with no styling at all looks very different on a Mac than on Windows or Linux for example. And in this case it sounds like the native OS functionality simply doesn't support styling here.
For the most compatability your best bet is probably to use a JavaScript plugin (jQuery has many if you're not against using jQuery, other frameworks have other options if you're already using something) to display a stylized menu from an existing <select>
. Or if you're ambitious you can write your own. But the native functionality is at the whim of the OS and will likely continue to be for some time.
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>
I want to change the background color of the select box
Just remove -ms-value as it is not supported by most browsers only edge and IE.
select.form-control:not([size]):not([multiple]) { height: calc(2.25rem + 2px); }
select.form-control:focus { color: #F1C26A; background-color: #fff; }
<html><head><link rel="stylesheet" href="style.css"></head><body><div class="col-6"><select id="Pizzas" name="Pizzas" class="form-control" ><option value="1" >Option 1</option><option value="2" >Option 2</option></select></div></body></html>
Unable to change selected option background color | React Select
There is an issue regarding this. Apparently isSelected is only provided for multi-select. For single-select you could check for:
state.data === state.selectProps.value
https://github.com/JedWatson/react-select/issues/3817
[Edit]
This seems really weird but it appears that if you declared the options outside of the component it works. Check here. If you copied the options inside the render function then the styling won't work. It's not a problem with the values being Dates or moment objects or something as I tried setting the values as "1" and "2".
[Edit 2]
Ok emm.. I refactored it to be a functional component and it works with the options being inside the component. I'm guessing it may be a problem with utilizing hooks. Same sandbox to look at.
Related Topics
Transparent Half Circle Cut Out of a Div
Why Does This Inline-Block Element Have Content That Is Not Vertically Aligned
Html Encoding Issues - "Â" Character Showing Up Instead of "&Nbsp;"
Can an Option in a Select Tag Carry Multiple Values
How to Keep Indent For Second Line in Ordered Lists Via Css
How to Make Blinking/Flashing Text With CSS 3
Uri Starting With Two Slashes ... How Do They Behave
How to Choose Between 'Class' and 'Id'
How to Remove Underline from a Link in Html
Is Either Get or Post More Secure Than the Other
Curve Bottom Side of the Div to the Inside With Css
Html5 Canvas Drawimage: How to Apply Antialiasing
How to Use Colspan and Rowspan in HTML Tables
Using Sections in Editor/Display Templates
Is There an Equivalent to Background-Size: Cover and Contain For Image Elements