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>
Related
I am using select 2 https://select2.org/ and I am wondering how do I change the colour of selected option with the value="4". So when Mark as destroyed is selected it shows in a different colour. I tried setting class and inline css directly but both did not work.
Not working: <option value="4" class="tx-orange">Mark as destroyed</option>
Not working: <option value="4" style="color:orange;">Mark as destroyed</option>
This is how the select block looks like
<select id="scanActionOptions" class="form-control select2">
<option value="0">Verify</option>
<option value="1">Mark as active</option>
<option value="2">Mark as dispense</option>
<option value="3">Mark as stolen</option>
<option value="4">Mark as destroyed</option>
<option value="5">Mark as sample</option>
<option value="6">Mark as free sample</option>
<option value="7">Mark as locked</option>
<option value="8">Mark as exported</option>
<option value="9">Mark as checkout</option>
<option value="10">Mark as expired</option>
<option value="11">Mark as recalled</option>
<option value="12">Mark as withdrawn</option>
</select>
$(document).ready(function() {
$('.select2').select2();
});
/*selected css*/
.select2-container--default .select2-results__option--selected {
color: orange;
background:rgb(221 221 221 / 32%) !important;
}
/*hover css*/
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: orange !important;
color: white;
}
/*particular option color*/
.select2-container--default .select2-results>.select2-results__options li:nth-child(2) {
color: #fff;
background: red !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<select id="scanActionOptions" class="form-control select2">
<option value="0">Verify</option>
<option value="1">Mark as active</option>
<option value="2">Mark as dispense</option>
<option value="3">Mark as stolen</option>
<option value="4">Mark as destroyed</option>
<option value="5">Mark as sample</option>
<option value="6">Mark as free sample</option>
<option value="7">Mark as locked</option>
<option value="8">Mark as exported</option>
<option value="9">Mark as checkout</option>
<option value="10">Mark as expired</option>
<option value="11">Mark as recalled</option>
<option value="12">Mark as withdrawn</option>
</select>
If you need to change selected colour apply css on ".select2-container--default .select2-results__option--selected" and change hover css then apply on ".select2-container--default .select2-results__option--highlighted.select2-results__option--selectable".
If you need colour particular option like 2nd option then you can use ".select2-container--default .select2-results>.select2-results__options li:nth-child(2)" .
Select2 CSS seems getting the style from this rule-set
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #5897fb;
color: white;
}
You might use li:nth-child(x) applied to the rule-set shown before. CSS aplied to the original select won't be visible.
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;
}
Lets say I have markup like this:
<select>
<option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
Now, I want the dropdown to display in gray ONLY when the value is empty i.e when it is showing "Select". When the user has selected one of the options, it should be black / default color.
(This is to be visually consistent with textboxes on my page that have gray placeholders).
I want to accomplish something like this:
select[value=""] {
color: gray;
}
But it turns out that the select tag doesn't really have a value attribute.
Any way to accomplish this other than using JavaScript?
Styling options, will only style them as shown in the drop down list, not when the select is not in focus. I wanted the select to be italic when the blank option is shown, it can be achived like this (note the blank option must have value="" set):
/* If the select does not have a valid value, ie the blank option is selected, we make it italic */
select:invalid {
font-style: italic;
}
/* Now the child options inherit the italics style, so we reset that*/
select > option {
font-style: normal;
}
/* Apply italics to the invalid options too when shown in the dropdown */
select option[value=""], select option:not([value]) {
font-style: italic;
}
<select required>
<option value="">-- Please Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Or using onchange attribute (works without required attribute):
/* If the select does not have the attribute [data-empty="false"] */
select:not([data-empty="false"]) {
font-style: italic;
}
/* Now the child options inherit the italics style, so we reset that*/
select > option {
font-style: normal;
}
/* Apply italics to the invalid options too when shown in the dropdown */
select option[value=""], select option:not([value]) {
font-style: italic;
}
<select onchange="this.dataset.empty = this.value == ''">
<option value="">-- Please Select --</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
You can use pseudo classes :first-child, :nth-child(1), :nth-of-type(1), if your empty option always will be on the first position. As I understand, option with empty value and text "Select" should be first, as default. In this case, we will be aware that.
Sweet and Simple, Just add below CSS will resolve your issue. I hope it'll help you out.
select option[value=""] {
color: red;
}
Verified on Google Chrome: Version 92.0.4515.107 (Official Build)
(64-bit)
Verified on Firefow: Version 90.0.2 (64-bit)
select option[value=""] {
color: red;
}
<select>
<option value="">Select</option>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<select>
<option value="">Select</option>
<option value="1">One</option>
<option value="">Two</option>
<option value="3">Three</option>
<option value="">Four</option>
</select>
<select name="backGround" size="1" onChange="updateTextColour(this.value);"><!--changeColor(this.selected);"-->
<option style="color:Gray">Select</option>
<option style="color:Black">Value 1</option>
<option style="color:Black">Value 2</option>
</option>
</select></span></span></td>
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>