CSS to select another Element based on a HTML Sele

问题:

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

回答1:

Its called an attribute selector

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

Example http://jsfiddle.net/JchE5/

回答2:

You can use

select option[value="1"]

but browser support won't be fantastic.

回答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.

回答4:

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>

回答5:

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.