I've got this:
<select style="font-size: 20" id="subject" name="subject">
<option hidden value="hello">I just want to say hello =]</option>
<option value="quote">I'd like a quote</option>
<option value="general">General</option>
</select>
Works so far, but i'd like the hello option to be gray as selected (like placeholders in textareas)
if i do this:
<select style="font-size: 20" id="subject" name="subject">
<option hidden style="color:gray" value="hello">I just want to say hello =]</option>
<option value="quote">I'd like a quote</option>
<option value="general">General</option>
</select>
It only changes the color of "hello" when dropped down, and not in the actual select element
Is this what you mean? This will make the selected option be grey.
select {
color: grey;
}
option:not(:checked) {
color: black; /* or whatever your default style is */
}
http://jsfiddle.net/6reh1ptd/
Reference: https://stackoverflow.com/a/8619489/1585362
Related
Tried a lot to change the background color of select option on hover but unable to do so please help me to find the solution.
select.rangs option:hover {
box-shadow: 0 0 10px 100px #ffea00 inset;}
option.rang:hover {
background: #ffea00 !important;}
<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
<option class="rang" value="">Sort By</option>
<option class="rang" value="popular">Most popular</option>
<option class="rang" value="register_desc">Oldest First</option>
<option class="rang" value="register_asc">Newest First</option>
I want the background color to be changed on hover in chrome
You cannot change the background of the <option>, you can't set script or style inside option element. This is used to show only text inside option element no matter what text , style or scripts
The main property of option element is value that's why there is no need to add CSS on text inside <option>
You could only apply CSS on <select>:
select {
background: #ffea00;
}
Following code will help you. Run Code Snippet.
.rang:hover { background: #ffea00 !important;}
<select id="order" name="order" title="order" class="form-control form-login__input-field label-error rangs">
<option class="rang" value="">Sort By</option>
<option class="rang" value="popular">Most popular</option>
<option class="rang" value="register_desc">Oldest First</option>
<option class="rang" value="register_asc">Newest First</option>
</select>
I'm trying to use css to style a select/option html element so that they display as a small list of button with the selected option being highlighted instead of the traditional dropdown menu.
I would've simply rewritten the entire thing, but i am editing a shopify theme, and there are too many implications of such change, some of them are above my "pay-grade" let's say, so i am trying to use the easy way out of just restyling it using css to get the desired result
I have done this before like this, but it doesn't work on mobile devices such as iOS.
#foo {
overflow: auto;
height: 2.4em;
border: 0;
}
#foo option {
display: inline-block;
margin: 0 .3em;
}
#foo option:checked {
font-weight: bold;
}
<select multiple="multiple" name="foo[]" id="foo" size="5">
<option value="1" selected="selected">Foo 1</option>
<option value="2">Foo 2</option>
<option value="3">Foo 3</option>
<option value="4">Foo 4</option>
<option value="5">Foo 5</option>
<option value="6">Foo 6</option>
<option value="7" selected="selected">Foo 7</option>
</select>
Sounds like <select multiple> might be closer to what you're looking for. Learn more here: https://www.w3schools.com/tags/att_select_multiple.asp
I've got a simple select element with a fake/placeholder. I want to have the placeholder in a grey color. Once a option is selected I want to change the color to black.
I do know that I can archive this by adding the required state to my select element and in my CSS I add:
But my question is can I archive this without having to require the field?
If possible I would prefer a pure CSS solution.
select {
color: black;
}
select:required:invalid {
color: grey;
}
<select id="select" required>
<option disabled selected hidden value="">Please select value</option>
<option value="1">Value 1</option>
<option value="2">Value 2</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.
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>