CSS 根据 HTML 选择选项值选择另一个元素

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

Answer 1

Its called an attribute selector

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

Example http://jsfiddle.net/JchE5/

Answer 2

You can use

select option[value="1"]

but browser support won't be fantastic.

Answer 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.

Answer 4

How about the alternative below?

You don't get a select box, but perhaps this is close enough.

 #option-1, #option-2, #option-3 { display: none; } #nos-1:checked ~ #option-1, #nos-2:checked ~ #option-2, #nos-3:checked ~ #option-3 { display: block; }

 <input id="nos-1" name="number-of-stuffs" type="radio" value="1" checked="checked" /><label for="nos-1">1</label> <input id="nos-2" name="number-of-stuffs" type="radio" value="2" /><label for="nos-2">2</label> <input id="nos-3" name="number-of-stuffs" type="radio" value="3" /><label for="nos-3">3</label> <div id="option-1"> <input type="text" name="stuff-1-detail" value="1-1" /> <input type="text" name="stuff-1-detail2" value="1-2" /> </div> <div id="option-2"> <input type="text" name="stuff-2-detail" value="2-1" /> <input type="text" name="stuff-2-detail2" value="2-2" /> </div> <div id="option-3"> <input type="text" name="stuff-3-detail" value="3-1" /> <input type="text" name="stuff-4-detail2" value="3-2" /> </div>

Answer 5

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>

Answer 6

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.