Question 45253 in Html Question posted in
Some basic documentation can be found here.

Why is the :invalid CSS selector required for this select list style to work? – Html

I want the first option in a select to be shown as grey. I found a working solution here.

The important bits:

/* fails */
.select1 option[value=""] {
  color: #999999;
}

/* works */
.select2:invalid,
.select2 option[value=""] {
  color: #999999;
}
<div>Fails:</div>
<select class="select1">
  <option value="" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<br/><br/>

<div>Works:</div>
<select class="select2" required>
  <option value="" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>

Run the demo and you’ll see the first example fails, while the second example works.

I’d expect the CSS selector .select2:invalid, .select2 option[value=""] to mean "either-or"; yet it fails without the leading .select2:invalid,.

Why?

Tags:

2

Answers


  1. 0

    I believe your confusion is due to a number of misunderstandings here. Your understanding of a CSS selector having a comma in it meaning "either-or" is correct, but I think that’s the only thing you got right.

    First, the option elements and the select element are two different things; what you see on the dropdown box is the <select> element, not the currently-chosen <option> element… to view the <option> elements, you need to activate the select element to show the options… notice how you see the select element value and the same value as one of the options when you do that?

    Second, the CSS selector for your first dropdown box is .select1 option[value=""]. This is styling only the option, not the select element itself. If you click on the first select element and then hover over the Apple or Banana options, you’ll see the "Select a fruit" option is greyed out. I repeat, the is greyed out… because that’s what your selector says to apply the style to.

    The second dropdown box has the same selector (but for .select2)… which means the options will still be greyed out where appropriate. But it also has .select2:invalid, which is the first part of the kicker. .select2:invalid applies to the <select> element, not the options… and occurs whenever the currently-selected option is an invalid one.

    How it knows which ones are invalid is the second part of the kicker: you have the required attribute on the second <select> element, but not on the first one. Because the second element has required on it, it knows that it is "invalid" unless it has an option with a non-empty value selected.

    I should also probably explain at this point that the value of an <option> is whatever is in the value="" attribute by default; if the value="" attribute is not declared, then the contents of the <option> element are used. So the values for your working dropdown box are empty, Apple, and Banana. The empty value is invalid, because you have the required attribute set on the dropdown box.

    So in summation, as you were perhaps close to discovering, it is both the .select2:invalid selector and the .select2 option[value=""] that are needed, but not just that; you also need the required attribute on the <select> element for both of those ‘validation’-based selectors to work.

    Login or Signup to reply.
  2. 0

    In your first select option color is grey but when it show in select because select color is black it’s showing black color

    .select1,
.select1 option[value=""]{
  color: #999999;
}

    give both select and option value the color you want and your option give other color like this. It will solve your problem

    .select1 option{
  color: black;
}

    /* fails */
.select1,
.select1 option[value=""]{
  color: #999999;
}

.select1 option{
  color: black;
}


/* works */
.select2:invalid,
.select2 option[value=""] {
  color: #999999;
}
    <div>Fails:</div>
<select class="select1">
  <option value="" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
<br/><br/>

<div>Works:</div>
<select class="select2" required>
  <option value="" selected>Select a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search