CSS pseudo-selector similar to :valid or :checked for select tags?

Question

I'm trying to find a non-JavaScript way of styling a select tag if it has a value that's been chosen.

For instance, if I have the following tag:

<select>
  <option value="">Select a widget...</option>
  <option value="1">Widget 1</option>
</select>

Is there a CSS selector I can use to tell when the value of that select tag isn't empty?

Answer 1

As per HTML5 Specs:

The required attribute is a boolean attribute. When specified, the user will be required to select a value before submitting the form.

Constraint validation: If the element has its required attribute specified, and either none of the option elements in the select element's list of options have their selectedness set to true, or the only option element in the select element's list of options with its selectedness set to true is the placeholder label option, then the element is suffering from being missing.

If the value of the first option element in the select element's list of options (if any) is the empty string, and that option element's parent node is the select element (and not an optgroup element), then that option is the select element's placeholder label option.

^{emphasis is mine}

The above statements imply that a select element with required attribute will become valid only when the user selects a value. Until then it will continue to be in invalid state.

---

The :valid, :invalid pseudo-selectors can themselves help to style a select element depending on whether a value has been chosen or not but it depends on a few factors. They are as follows:

• By chosen, you mean to check if a valid value has been chosen and not just any choice.
• The invalid or empty value (in this case "Select a widget...") has value="" and is the first option under the select element.
• The select element is a mandatory element - meaning, we can add the required attribute to it.

Based on your problem statement, I think your scenario satisfies all the aforementioned factors.

select {
  border: 2px solid blue;
  outline: none;
}
select:valid {
  border: 2px solid green;
  outline: none;
}

<select required>
  <option value="">Select a widget...</option>
  <option value="1">Widget 1</option>
</select>

The above snippet has been verified in IE10+ (including Edge), Chrome, Opera and Firefox.