Style element based on selected Asked May 02 '13 at 17:53 Active Jan 06 '23 at 22:21 Viewed 9.1k times 76 0 Is it possible to style a select element based on what option is selected with CSS only? I am aware of existing JavaScript solutions. I tried to style the option element itself, but this will give style only to the option element in the list of options, not to the selected element. select[name="qa_contact"] option[value="3"] { background: orange; } http://jsfiddle.net/Aprillion/xSbhQ/ If not possible with CSS 3, will CSS 4 subject selector help in the future - or will this stay a forbidden fruit to CSS? Update 2022: using :has pseudo-class can help to style the select itself (in browsers that support both the :has pseudo-class and styling of <select>), but it only works for HTML attributes, so only if the select has the option explicitly selected initially. It will not work dynamically without JS - after the user changes selection, that will only change DOM properties, but not the HTML attributes on which CSS attribute selectors depend: select:has(option[selected][value="3"]) { background: orange; } css parent-child edited Jul 28 '22 at 16:11 Aprillion asked May 02 '13 at 17:53 Aprillion 21,510 5 55 89 I can dispute your selected awnser, stay tuned. It is very "hacky" – Justin May 02 '13 at 18:56 @Justin - i will change the accepted answer if there is a better one. but it's good enough for me at the moment. – Aprillion May 02 '13 at 19:14 Check out my anwser and let me know if it actually anwsered your question lol. – Justin May 02 '13 at 20:05 1 both subject selector and [:has() pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) are still not supported yet in any browser :( – Aprillion Feb 14 '16 at 09:55 I tried my best to go without JS, see if it's close to what you need. It only takes one event handler ( "this.dataset.chosen = this.value" ), it's dependency-free, it's almost no JS, just a tiny bridge over a lacking CSS feature. – dkellner Jul 27 '22 at 14:46 @dkellner I upvoted your answer in 2019, but unfortunately it's still not what I was looking for in 2013 when I asked the question. It's helped a lot of people for sure, so thank you for that. In 2022, `select:has(option[selected][value="3"])` was the closest we got to the dream, however attribute selectors only work for DOM attributes and not for DOM properties, so it wouldn't be dynamic and it's still true we don't have any CSS-only solution, we have to use JS (however minimal) to style a select based on the selected option :( – Aprillion Jul 28 '22 at 16:03 Sad but true. What's even worse, there will probably never be a solution in pure CSS. – dkellner Jul 28 '22 at 18:41 5 Answers5 69 Impossible? Hold my beer. Make the select element aware of the current option. CSS can handle the rest. For this, all we need is a value assignment in the onchange event. With a little more effort you can also initialize the <select> tag by its original value; not included below but it's super easy, just give it a "data-chosen" property when composing the markup. <select onchange=" this.dataset.chosen = this.value; "> ... ... </select> And now you can easily target & style it: select[data-chosen='opt3'] { border: 2px solid red; } See on CodePen. Side note: "chosen" is no magic word, just a descriptive name - it could be "SantaClaus". It would also look better that way. edited Feb 24 '22 at 10:55 dkellner answered Sep 27 '19 at 10:35 dkellner 8,726 2 49 47 2 A problem with this solution is that if the user navigates away and then comes back through the history, the selection is preserved but the data attribute is not. :( – A. Donda Jun 19 '21 at 20:41 @A.Donda Sure it can be refined in many ways. The idea here is the simple one-liner that transfers something that you can't target with CSS into something that you can. – dkellner Jun 19 '21 at 21:28 This technically uses JavaScript, does it not? – saagarjha Apr 14 '22 at 16:41 1 Yes but it's not a "Javascript solution", the op meant the ones like select2.js - also, the previous versions of my post contained a line explaining just this, but then I deleted it because I was like ok, probably no one cares. (Apparently, some do!) And while "technically" it's javascript, also "technically" it's a html property. But I see your point. – dkellner Apr 14 '22 at 22:54 @dkellner It's an HTML property containing JS, OP asked specifically for CSS-only. – timotgl Jul 27 '22 at 12:36 @dkellner Enlighten me, what is the actual meaning behind the words "CSS only"? This is a pretty binary classification, not only for Sheldon Cooper. I agree there is ambiguity on how comprehensive of a JS solution OP had in mind. However, consider that people arrive here via search engines and this is the highest rated answer, contradicting the question - which is not constructive. I'm not saying it's not useful for related questions. – timotgl Jul 27 '22 at 14:02 @timotgl People coming here and finding the solution useful is the very reason of the upvotes. Also, funny you mentioned "CSS only" since it will obviously include HTML. Again, just return false and move on. Let others understand & use what I posted. – dkellner Jul 27 '22 at 14:25 @timotgl "It's implied that HTML is being used." Exactly. Therefore, you've been, quote, enlightened about the actual meaning behind the words "CSS only", end quote. Your words, not mine. So, again, since the answer is useful and solves the problem without involving any of the well-known Javascript solutions, I think it's pretty constructive. No one suffered any harm from that one single A=B statement in the event handler. – dkellner Jul 27 '22 at 14:37 @dkellner "CSS only" impliying that HTML is also involved does however not imply that JS is used - that's the entire point of specifying "CSS only" in the first place. There are only 3 technologies in question here, one is implied (HTML), one is excluded (JS), one is left (CSS). You can stop defending the usefulness of your answer, I never criticized that. It just not does answer OPs question. – timotgl Jul 27 '22 at 15:29 46 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; } edited May 23 '17 at 11:47 Community 1 1 answered May 02 '13 at 18:29 Troy Alford 26,660 10 64 82 for the jQuery part - it should check the pre-selected option as well as onchange event – Aprillion May 02 '13 at 19:23 I have modified this `select.foo, option[value="foo"] { background: red; }` in jsFiddle to change background color when value="" with this `select.foo, option[value=""] { background: red; }` but it doesn't work. How can I change background color when value is empty? – VansFannel Jun 14 '16 at 11:24 1 @VansFannel - that's what the first line is for: `select, option { background: red; }` will set the default background color of the box (which typically maps to the option with no value). – Troy Alford Jun 14 '16 at 15:35 I do not like this variant in that it is (miss-)using class-names. What if an option has the same name like an existing class-name? I would recommend to write the selected value in a data-attribute, which is by now supported in, I guess, all browsers and it is easy to write selectors for it. So "data"- and "style"-layers are seperated. – K.S. Nov 28 '16 at 08:32 Yes - probably better today. The answer was from 2013, however. – Troy Alford Nov 28 '16 at 16:00 For future readers: The subject-selector has been replaced by the `:has()` syntax. – Falco May 17 '22 at 14:21 JS for using a data attribute instead: `var $select = $('select'); function setVal() { $(this).attr('data-val', $(this).children(':selected').val()); } $select.each(setVal).on('change', setVal);` – TheJosh Jul 27 '23 at 00:33 7 If somebody is looking for placeholder for select in Bootstrap 5 please add this to SCSS code (but keep in mind that only option with no value will be treated as placeholder text): select:has(option[value=""]:checked) { color: $input-placeholder-color; opacity: 1; } answered Jan 06 '23 at 22:21 Bartłomiej Jakub Kwiatek 197 4 12 I'm following this pattern for placeholder text so perfect solution for me. Thanks! – Drazen Bjelovuk Jul 23 '23 at 20:42 3 So here is what I found on it being possible. The biggest issue is that after you have selected an element, the background color doesn't change because the select element isn't actually redrawn (seems more prevailant in IE - go figure). So even though you select a different option, that option isn't hightlighted in the list when you click the select element again. To fix the redrawing issues in IE, it required changing the font-size by a minimal amount, +-.1. The other thing, which doesn't seem to be documented well, is that the pseudo class :checked does also work on select controls. The fiddler to show the added css that makes it possible. I only briefly played with it on Chrome and IE9, fyi. EDIT: Obviously, you will need to set the [value="x"] to your desired value for specific option highlighting. edited May 02 '13 at 20:05 Justin answered May 02 '13 at 19:58 Justin 3,337 3 16 27 this is useful - for IE and Chrome. Does not work in Firefox nor Opera at all. – Aprillion May 02 '13 at 21:58 1 @deathApril I didn't look at opera, but it not working in Firefox is actually a bug in [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=79107). If you look at the applied CSS, it is actually there lol. Javascript would be required in this case. – Justin May 03 '13 at 14:09 thanks for the bug link, if it wasn't fixed since 2001, I don't believe in will work in Firefox any time soon :( – Aprillion May 03 '13 at 14:38 2 **update**: no longer works in Chrome 48.0 nor IE 11 - background of is not influenced by the css for at all – Aprillion Feb 14 '16 at 09:39

Answer 1

Pure CSS Method:-

You can style it if you want to apply style if empty value selected using :valid selector like the following code

Display in Red If Selected value is Empty

select > option {
  color: black;
  font-weight:initial;
}
select option[value=""] {
  color: red;
  font-weight:bold;
}
select[required]:invalid {
  color: red;
  font-weight:bold;
}

<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">15 px</option>
<option value="16">16 px</option>
</select>
<select required name="fontColor">
<option value="">Please select</option>
<option value="red" selected>Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>