How to change the default colors of the options of a select?

Question

How to change the default colors of the options of a select?

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

What I would like to do is that the drop-down list that comes out of a select that in this case would be a set of options , have a different background color and when they are passed over it modify the key of it.

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 in other clases less 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;
}

html5 html css3 css

asked by David 09.02.2017 в 21:50

source

2 answers

1

If I'm not wrong, this is not something that can be done right now.

The standard does not specify anything about the option styles and it is the browsers that represent them as they want; so even if you find a way, it probably will not work on all browsers.

Some respect the attributes color and background-color but not always the case: Chrome and IE do, Firefox does not (although it could be a bug as indicated Marcos Gallardo in a comment ), and only IE / Edge respect the :hover styles. Thus, the following code will look different in each browser:

select { color:blue; }
option { color:red; background-color:yellow; }
option:hover { color:yellow; background-color:red; }

<select>
  <option>Valor 1</option>
  <option>Valor 2</option>
  <option>Valor 3</option>
  <option>Valor 4</option>
</select>

And the color bar when you mouse over the option that I know can not be stylized (in some cases it does not even exist, as in iOS where the drop-down lists are "roulettes").

To stylize a select , you could perhaps use a ul / li and simulate the drop-down list. Some frameworks such as Bootstrap have drop-down menus created like this and you can easily change their style.

answered by 09.02.2017 в 23:03

Encode64 in Oracle? How to detect the user's language and do one thing or another?

score 2 · Accepted Answer

Surely the problem is that the color of the text in the select (not the one of the option ) is the one that is still black.

Solution:

Indicate color for select .

Example:

select,
option {
  color: red;
}

<select>
  <option>Opcion 1</option>
  <option>Opcion 2</option>
  <option>Opcion 3</option>
  <option>Opcion 4</option>
</select>