Change Select Box Option Background Color

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



Leave a reply



Submit