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
Related
how to change the color of the dropdown text that I am given red but initially it look like black when we click that it look like red, so how to change that initially it look like red color
<select>
<option style="color:red">one</option>
<option style="color:red">two</option>
</select>
You should apply the style to the select, not to the option.
Setting style="color:red" will set the color of the option to red.
Setting style="color:green" will set the color of select to green
<select style="color:green">
<option style="color:red">one</option>
<option style="color:red">two</option>
</select>
If you dont want the color of options to be updated, use color: initial for the option.
select {
color: red;
}
select option {
color: initial;
}
<select>
<option>one</option>
<option>two</option>
</select>
What i understood is, you want the drop-down texts in red before clicking it.
<Select style="color:red">
<option>one</option>
<option>two</option>
</select>
<select>
<option value="apple" style="background: red">Apple</option>
<option value="banana" style="background: yellow">Banana</option>
<option value="pear" style="background: green">Pear</option>
</select>
So I have an HTML drop down with options that have background colors. However, once I select one of these options from the list, the background color goes away...
Is there a way to make it so once an option is selected, the background color persists?
i have create a JSFiddle
Following is the code:
.Red {
background-color: #ff0000;
}
.Green {
background-color: #00ff00;
}
.Blue {
background-color: #0000ff;
}
<select name="select" class="Red" 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>
<select style="background:pink">
<option value="apple" style="background: red">Apple</option>
<option value="banana" style="background: yellow">Banana</option>
<option value="pear" style="background: green">Pear</option>
</select>
The selected item is a whole other object in the DOM, other style is applied to it.
You can use JavaScript or JQuery to get the color of the selected option and than apply it on the selected item.
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>
I have a basic html select:
<select>
<option value="1">Apple</option>
<option value="2">Banana</option>
<option value="3">Grape</option>
</option>
I want to set the background colour of each option to a different one. For instance, Apple is red, Banana is yellow and Grape is purple. By initiating a drop down, I will see the different colours in each option.
Is it possible to achieve the above with CSS3/HTML5 on the latest Firefox and Webkit(Chrome and Safari) browsers?
NOTE: Can you test your solutions on both the latest Firefox and Chrome, possibly on the Mac? I'm aware of the background colour method but it only works in Firefox on the Mac.
Is it not just as easy as this? http://jsfiddle.net/d8p8Q/
<select>
<option value="1" style="background:red">Apple</option>
<option value="2" style="background:yellow">Banana</option>
<option value="3" style="background:purple">Grape</option>
</select>
Am I missing something here?
Safari Chrome (and I'm using Windows 7)
"Grape" is blue because that's the one I'm hovering over. I don't think it's possible to change that blue "selected" colour using the native <select> element.
If that's what you're after doing, you'll have to swap out the <select>s with JavaScript replacements, such as these:
http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
/* Style */
select option[value="1"] {
background-color: #f00;
}
select option[value="2"] {
background-color: #0f0;
}
select option[value="3"] {
background-color: #00f;
}
<!-- HTML -->
<select>
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
Of course it would be easier to target with classes, but this should get you started.
Like this? http://jsfiddle.net/3HWUw/1/
HTML:
<select>
<option id="one" value="1">Apple</option>
<option id="two" value="2">Banana</option>
<option id="three"value="3">Grape</option>
</select>
CSS:
#one {
background-color: red;
}
#two {
background-color: yellow;
}
#three {
background-color: green;
}
The above works, or you can do it in CSS like this:
http://jsfiddle.net/JmwJ9/