For several days now I've been searching the web and I've tested countless approaches to create an own dropdown list. But I'm not satisfied with any approach.
With CSS I can configure the color of the text (A), the style and color of the border (B) of the dropdown field and the color of the background (C).
But are there really no CSS properties for the color of the selection border (D), the color of the selection itself (E) and the style and color of the dropdown selection border (F)?
I can't believe this, but on the other hand, I haven't been able to find any CSS properties that would allow this.
A clarifying answer, that this is really not possible, would end my search and if the CSS properties I'm looking for do exist, that would even be better.
And here's my code:
<html>
<head>
<style type = "text/css">
select {
color: #ffffff;
background-color: #ff8800;
border-width: 3px;
border-color: #ff0000;
}
</style>
</head>
<body>
<select>
<option value = "">[Select an option]
<option value = "1">Option 1
<option value = "2">Option 2
<option value = "3">Option 3
<option value = "4">Option 4
<option value = "5">Option 5
</select>
</body>
</html>
At the moment, no, we can't set these D, E and F of a select element.
The only things you are missing (which doesn't even solve your problem), are the selected option and options background (different from select background).
select {
/* C */
background-color: #ff8800;
}
option {
background-color: yellow;
}
option:checked {
background-color: green;
}
<select>
<option value="">[Select an option]</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>
<option value="5">Option 5</option>
</select>
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>
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>
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;
}
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>