Is There a CSS Selector to Match a Option Value of The Select Tag

Is there a css selector to match a option value of the select tag?

option[value=two] { 
    background-color: yellow;
}

<select>
  <option value="one">1</option>
  <option value="two">2</option>
  <option value="three">3</option>
</select>

Style select element based on selected option

Unfortunately, yes - this is something not currently possible with only CSS. As mentioned in the answers and comments to this question, there is currently no way to make the parent element receive styling based on its children.

In order to do what you're wanting, you would essentially have to detect which of the children (<option>) is selected, and then style the parent accordingly.

You could, however, accomplish this with a very simple jQuery call, as follows:

HTML

<select>
  <option value="foo">Foo!</option>
  <option value="bar">Bar!</option>
</select>

jQuery

var $select = $('select');
$select.each(function() {
    $(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
    $(this).attr('class', '').addClass($(this).children(':selected').val());
});

CSS

select, option { background: #fff; }
select.foo, option[value="foo"] { background: red; }
select.bar, option[value="bar"] { background: green; }

Here is a working jsFiddle.

Back to the question about the future of selectors. Yes - the "Subject" selectors are intended to do exactly what you mention. If/when they ever actually go live in modern browsers, you could adapt the above code to:

select { background: #fff; }
!select > option[value="foo"]:checked { background: red; }
!select > option[value="bar"]:checked { background: green; }

As a side-note, there is still debate about whether the ! should go before or after the subject. This is based on the programming standard of !something meaning "not something". As a result, the subject-based CSS might actually wind up looking like this instead:

select { background: #fff; }
select! > option[value="foo"]:checked { background: red; }
select! > option[value="bar"]:checked { background: green; }

Detecting if an option has been selected in select using CSS

Yes, the :checked pseudo-class also targets <option> tags.

Example:

option:checked { display:none; }

Source:

http://www.w3.org/TR/selectors/#checked

EDIT:

If you want to target an element outside of your <select>, it can be done in a hacky way by manipulating the :valid css pseudo-class. Note that the required attribute must be enabled for the <select> tag to register as valid/invalid.

Example:

body {  background-color: #fff;}
select:valid ~ label {  background-color: red;}

<select required>  <option value="" selected>Please select an option</option>  <option>1</option>  <option>2</option></select><label>Please select an option</label>

CSS selector to find select with specified option label

You can't do this with CSS.

You can either use this jQuery selector (:has() and :contains() are not part of CSS):

$("select:has(option:contains('Second'))")

Or this XPath expression:

//select[contains(option, 'Second')]

CSS selector - Select first option of required select

To style the first option of a required select, I would simply use an attribute selector, followed by the :first-child pseudo-class.

select[required] option:first-child {  color: red;}

<select required name="fontSize"><option value="">Please select</option><option value="9">9 px</option><option value="10">10 px</option><option value="11">11 px</option><option value="12">12 px</option><option value="13">13 px</option><option value="14">14 px</option><option value="15" selected="">15 px</option><option value="16">16 px</option></select>
<select name="fontColor"><option value="">Please select</option><option value="red">Red</option><option value="green">Green</option><option value="blue">Blue</option></select>

How to style the option of an html select element?

There are only a few style attributes that can be applied to an <option> element.

This is because this type of element is an example of a "replaced element". They are OS-dependent and are not part of the HTML/browser. It cannot be styled via CSS.

There are replacement plug-ins/libraries that look like a <select> but are actually composed of regular HTML elements that CAN be styled.

CSS :selected pseudo class similar to :checked, but for option elements

the :checked pseudo-class initially applies to such elements that have the HTML4 selected and checked attributes

Source: w3.org

---

So, this CSS works, although styling the color is not possible in every browser:

option:checked { color: red; }

---

An example of this in action, hiding the currently selected item from the drop down list.

option:checked { display:none; }

<select>    <option>A</option>    <option>B</option>    <option>C</option></select>

Is there a way to select an open select box in css?

It's not possible to detect if a HTML select element is opened using CSS, or even javascript.

If you wish to customise the arrow symbol of a custom dropdown, your best option is to use a custom dropdown component which maps to a hidden select element.

---

Related Topics