CSS to select another Element based on a HTML Select Option Value

Question

Is there a CSS selector that allows me to select an element based on an HTML select option value?

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p>Display only if an option with value 1 is selected</p>

I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.

Is there a way to do this?

Edit:

The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P> element based on the value selected in the <select>.

How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:

<select name="number-of-stuffs">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="stuff-1">
     <input type="text" name="stuff-1-detail">
     <input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none"> 
     <input type="text" name="stuff-2-detail">
     <input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
     <input type="text" name="stuff-3-detail">
     <input type="text" name="stuff-4-detail2">
</div>

I would like to display div.stuff-1 and div.stuff-2 when number-of-stuffs=2 and display div.stuff-1 div.stuff-2 and div.stuff-3 when number of stuffs=2.

Something like this fiddle

Possible Duplicate: http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — Mark, May 09 '13 at 00:58
You can select it using an attribute selector like `option[value="1"]` but browser support isn't that great, firefox lets you add styles but chrome does not. I don't think there is a way to have the paragraph shown based on the option selected without JavaScript/jQuery. — ferne97, May 09 '13 at 01:12
And here is a test to show which browsers support attribute selectors - http://dev.l-c-n.com/CSS3-selectors/browser-support.php — klewis, May 09 '13 at 13:38

score 22 · Answer 1 · answered May 09 '13 at 00:56

22

Its called an attribute selector

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

Example http://jsfiddle.net/JchE5/

answered May 09 '13 at 00:56

Kevin Bowersox

88,138
17
142
176

1

doesn't he wants to display a div on that value rather than styling that?? – Praveen Puglia May 09 '13 at 13:54
2

updated question: I'm not really trying to select the option element, I'm trying to select a p element based on which option is selected. – hannson May 09 '13 at 13:55

adnrw · Answer 2 · 2013-05-09T01:02:58.473

3

You can use

select option[value="1"]

but browser support won't be fantastic.

edited May 09 '13 at 01:02

answered May 09 '13 at 00:57

adnrw

1,028
6
13

He doesn't mean the browser support for selectors - he means the styling for select & option tags. – Luca Steeb Feb 21 '15 at 13:21

score 3 · Answer 3 · edited May 23 '17 at 12:10

3

This probably requires a parent selector which has not been specified for CSS2 or CSS3.

CSS selector for "foo that contains bar"?

Is there a CSS parent selector?

A subject selector has been defined in the CSS4 working draft as of May 2013 but no browser vendor has implemented it yet.

Whether the method in question works (in theory) using the subject selector remains to be seen.

edited May 23 '17 at 12:10

Community

1
1

answered May 10 '13 at 10:41

hannson

4,317
7
35
45

score 1 · Answer 4 · answered May 09 '13 at 01:06

i believe that in "live" or realtime, it is possible only with javascript or jQuery. Wrap the potentially hidden fields in divs with display: none onLoad and have JS or jQuery change state to display: block or however you like.

//Show Hide based on selection form Returns
$(document).ready(function(){

//If Mobile is selected
$("#type").change(function(){
    if($(this).val() == 'Movil'){
     $("#imeiHide").slideDown("fast"); // Slide down fast
    } else{
     $("#imeiHide").slideUp("fast"); //Slide Up Fast
    }
});

//If repairing is selected
$("#type").change(function(){
if($(this).val() == 'repairing'){


$("#problemHide").slideDown("fast"); // Slide down fast
$("#imeiHide").slideDown("fast"); // Slide down fast
}else{
$("#problemHide").slideUp("fast"); //Slide Up Fast
}
});
});
// type is id of <select>
// Movil is option 1
// Repairing is option 2
//problemHide is div hiding field where we write problem
//imeiHide is div hiding field where we write IMEI

i am using in one of my apps...

Possible with PHP too, but with PHP, you will have to send the change request or you can write a code in php to have certain classes to be loaded based on already selected values, for example

<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}">
   <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

score 1 · Answer 5 · answered Mar 28 '17 at 00:52

How about this alternative?

HTML:

<input name="number-of-stuffs" type="radio" value="1" />
<div>
    <input type="text" name="stuff-1-detail" />
    <input type="text" name="stuff-1-detail2" />
</div>
<input name="number-of-stuffs" type="radio" value="2" />
<div>
    <input type="text" name="stuff-2-detail" />
    <input type="text" name="stuff-2-detail2" />
</div>
<input name="number-of-stuffs" type="radio" value="3" />
<div>
    <input type="text" name="stuff-3-detail" />
    <input type="text" name="stuff-4-detail2" />
</div>

CSS:

div {
    display: none;
}

input:checked + div {
    display: block;
}

You can also use label and hide (multiple ways) the input if needed.. I admit this requires some tinkering to display the input and div groups apart, but I think it's worth it.

score 0 · Answer 6 · answered Feb 14 '21 at 04:14

I found a solution based on this answer satisfies op's request most. Not purely in CSS but definitely least amount of JavaScript is involved.

select[data-chosen='1']~.stuff-1{ 
    display: block !important;
}

select:not([data-chosen='1'])~.stuff-1{ 
    display: none;
}

select[data-chosen='2']~.stuff-2{ 
    display: block !important;
}

select[data-chosen='3']~.stuff-3{ 
    display: block !important;
}

<select name="number-of-stuffs" data-chosen = "1" onchange = "this.dataset.chosen = this.value;">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<div class="stuff-1">
  <span> I am stuff-1!</span>
  <input type="text" name="stuff-1-detail">
  <input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none"> 
  <span> I am stuff-2!</span>
  <input type="text" name="stuff-2-detail">
  <input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
  <span> I am stuff-3!</span>
  <input type="text" name="stuff-3-detail">
  <input type="text" name="stuff-4-detail2">
</div>

You don't even need to write any separated js, despite embedding "this.dataset.chosen = this.value;" in onchange seems to be a bit hacky.

CSS to select another Element based on a HTML Select Option Value

6 Answers6

Linked

Related