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>
Related
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>
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>
The problem is I can't change the height of the drop down box in html.for (select->option) I try to apply the style in CSS. It does not works
You can not control the style of option. (see here:https://css-tricks.com/dropdown-default-styling/)
however you can change the font-size and the option will grow
select option{
font-size: 20px;
}
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
It is not possible to change height of 'option'
Only you can change the background-color and color of the 'option' values
You can change the 'select' element height.
You just need to use the height CSS attribute for the select tag.
label select {
height: 100px;
}
<label>
<select>
<option selected>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</label>
<select style="min-height:40px;min-width:100px;">
<option value="">Select1</option>
<option value="">Select2</option>
<option value="">Select3</option>
</select>
You can style the select and option elements usign CSS like this:
select {
height: 200px;
color: red;
}
option {
color: green;
}
Notice that you have to remove the "." before select and option.
This will overwrite any select and option element.
EDIT:
You can also refer to a certain select element by giving to that element a class name, like this:
select.s1{
height: 100px;
}
select.s2{
height: 150px;
}
<select class="s1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select class="s2">
<option value="fiat">Fiat</option>
<option value="ferrari">Ferrari</option>
<option value="alfaromeo>Alfa Romeo</option>
<option value="lancia">Lancia</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;
}