What I would like to do is that the drop-down list that comes out of a, select
which in this case would be a set of options
, has a different background color and when it is passed over it, it modifies its hue.
CSS code:
select option {
color:Red;
}
I already applied the above but I load the page and it does not mark any change, the letter is still black. The design can be applied to others clases
except when trying to do the options.
Select General Code (css):
select {
/* styling */
background-color: white;
border: thin solid blue;
border-radius: 4px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
Surely the problem is that the color of the text in the
select
(not theoption
) is still black.Solution:
Indicate the
color
for theselect
.Example:
If I'm not mistaken, this is not something that can be done right now.
In the standard nothing is specified about the styles of the
option
and it is the browsers that represent them as they want; so even if you find a way, it probably won't work in all browsers.Some respect the and attributes
color
,background-color
but this is not always the case: Chrome and IE do, Firefox does not (although it could be a bug as Marcos Gallardo indicates in a comment ), and only IE/Edge respect the styles of the:hover
. Thus, the following code will look different in each browser:And the color bar on hover
option
that I know of can't be styled (in some cases it doesn't even exist, like on iOS where dropdowns are "spinwheels").To style a
select
, you could perhaps use aul
/li
and simulate the dropdown list. Some frameworks like Bootstrap have dropdown menus created like this and you can easily change their style.