I am trying to make a different <select> tag and I have trouble with the <option> tag.
When I hover over the <option> tag, the background does not work.
The code:
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
select > option{
background:red;
}
I tried this code but not working:
option:hover {
background:red;
}
option:checked {
background:red;
}
I wonder that if I can set the background color of the <option> tags when I hover over them. I only want CSS solutions and I do not want ANY JavaScript solutions.
Related
To put it very simple, I want to change the background color of the main field (not sure what else to call it, it's the field marked in red in the example) of a HTML element. I do not want to change the background color of the dropdown fields.
Is this possible? If so, how?
Source code:
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
You can use css selectors: select and select option (I put red for options, but you can change color to whatever you like)
select {
background-color: yellow;
}
select option {
background-color: red;
}
<select>
<option>Item 1</option>
<option>Item 2</option>
<option>Item 3</option>
</select>
One way would be to style de select and the option
option{
background-color: white;
}
select {
background-color: yellow;
}
<select>
<option value="3">tewe</option>
<option value="8">eerer</option>
<option value="5">ererere</option>
</select>
So I want a select dropdown menu, with each option being a different colour.
<select>
<option value="blue" style="background-color:blue"></option>
<option value="red" style="background-color:red"></option>
</select>
When a colour is selected, I want the select box itself to inherit the background-color of the option that was selected.
I know this can be done quite easily with javascript, I am wondering if there is a CSS solution to this?
You can do like this. Onchange event needs to be captured and color needs to be changed for select list
<select name="select" onchange="this.className = this.options[this.selectedIndex].className">
<option class="Red" value="1">Red</option>
<option class="Green" value="2">Green</option>
<option class="Blue" value="3">Blue</option>
</select>
.Red{
background-color: #ff0000;
}
.Green{
background-color: #00ff00;
}
.Blue{
background-color: #0000ff;
}
JSFIDDLE
EDIT:
I don't know why I got 2 downvotes, because still no one fixed the problem.
Problem:
I can't style the color of the selected option (that got functionality as the placeholder).
I tried this and some other silimar solutions, but couldn't find a HTML/CSS based solution.
option {
color:#999;
}
/* NOT working */
option:selected {
color:blue;
}
<select class="form-control" id="frmMaand" name="offer_request[month]">
<option value="" class="disabled-option" hidden selected>
<span style="color:#999 !important; background:#333 !important;">Select an option</span>
</option>
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<option value="value4">Option 4</option>
</select>
Note:
I am looking for a non-JavaScript/jQuery solution.
I want attributes attached to the option tag to keep the user experience optimal:
hidden selected
Edit:
I want to use the first option like a placeholder. I don't want the placeholder visible in the dropdown and the color need to be lighter than the other option elements.
Try this code, jsfiddle
option {
color:#999;
}
/* NOT working */
option:selected {
color:blue;
}
.styled-offer select.offer-select {
color:blue;
}
.styled-offer select.offer-select option {
color: #999;
}
<div class="styled-offer">
<select class="form-control offer-select" id="frmMaand" name="type">
<option value="1" class="disabled-option selected" hidden selected >
<span>Select an option</span>
</option>
<option value="value1" >Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
<option value="value4">Option 4</option>
</select>
</div>
This option element of a select control cannot be styled, due to being rendered as HTML, except for the background-color and color
properties.
You can change style of select and option like following :-
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[val="1"]{
background: rgba(100,100,100,0.3);
}
select option[val="2"]{
background: rgba(200,200,200,0.3);
}
It may help you.
You don't need the :selected selector:
Just do tht :
#frmMaand option {
color:#999;
}
https://jsfiddle.net/pbvijayk/7bLdg7cg/5/
option.red
{
color: #cc0000;
}
<select name="color">
<option class="red">Red</option>
<option >White</option>
<option >Blue</option>
<option >Green</option>
</select>
please run the code in ie9 and chrome.
color of the text displayed in ie9 correctly color will appear in both dropdown and dropdown box.
but in chrome text color displayed in dropdown list but not displayed in box.
Please try this one :
https://jsfiddle.net/7bLdg7cg/7/
.greenText{ color:green; }
.blueText{ color:blue; }
.redText{ color:red; }
<select
onchange="this.className=this.options[this.selectedIndex].className"
class="greenText">
<option class="greenText" value="apple" >Apple</option>
<option class="redText" value="banana" >Banana</option>
<option class="blueText" value="grape" >Grape</option>
</select>
Try giving the style to select not the option like this:
<select name="color">
<option class="red">Red</option>
<option>White</option>
<option >Blue</option>
<option >Green</option>
</select>
<style>
select .red
{
color: #cc0000;
}
</style>
One of our customers has a hard time reading the grey text in disabled controls in our web-based application:
We would like to change the style to a light grey background and a black text. Unfortunately, most browsers (including IE, which is what the customer is using) ignore the color: ... CSS attribute on disabled controls, so we cannot change the foreground color.
For text boxes (input type="text"), this can easily be workarounded by using the readonly instead of the disabled attribute. Unfortunately, this is not an option for dropdowns (select) or checkboxes (input type="checkbox").
Is there an easy workaround for that? Preferebly one where the control does not need to be replaced by another type of control? (...since our controls are rendered by ASP.NET)
PS: Using the [disabled] selector in CSS does not make a difference.
In Internet Explorer 9, support will be added for the :disabled pseudo-selector (ref). I don't know whether that will honor the "color" property, but it seems likely.
In older versions of IE, you can adjust the background color (but not the color). Thus:
<style type="text/css">
select[disabled] { background-color: blue; }
</style>
That works in IE 7 and IE 8. You still can't alter the foreground color, but you can change the background color to contrast more strongly with the gray that IE assigns it when it's disabled.
This worked for me in webkit and Firefox
select:disabled{
opacity: 0.6;
}
For those still finding this.
Not working:
select[disabled] { background-color: blue; }
Working:
select option [disabled] { background-color: blue; } will do
This worked for me
select[disabled='disabled']::-ms-value {
color: red;
}
Sorry for my english...
That's not possible using css just, IE doesn't allow change properties of a disabled select tag
You can try the following:
<style>
/*css style for IE*/
select[disabled='disabled']::-ms-value {
color: #555;
}
/*Specific to chrome and firefox*/
select[disabled='disabled'] {
color: #555;
}
</style>
I know this is question is old but this code worked well for me.
It allowed for full control of text and background color. I used this code with a disabled select control whose value is set based on a value from another select. I didn't want to see the grayed background, especially when the value had not yet been set.
CSS
<style>
.whatever-control:disabled, .whatever-control[readonly] {
background-color: white;
opacity: 1;
color: blue;
font-weight: bold;
}
</style>
Form
<select id = "SelectState" name="SelectState" class="whatever-control" disabled="disabled">
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">District of Columbia</option>
<option value="DE">Delaware</option>
<option value="FL" selected="selected">Florida</option>
<option value="GA">Georgia</option>
</select>
You can try,
option:disabled{
opacity: 0.6;background-color: #ff888f;
}
<select id="HouseCleaningEmp" onChange="myCalculater()">
<option value="1">option 1 </option>
<option value="2">option 2 </option>
<option value="3">option 3 </option>
<option value="4">option 4 </option>
<option value="5" disabled>option 5 </option>
<option value="6" disabled>option 6 </option>
<option value="7">option 7 </option>
<option value="8">option 8 </option>
</select>