CSS pour sélectionner un autre Élément basé sur HTML, Sélectionnez l'Option Valeur

Est-il un sélecteur CSS qui me permet de sélectionner un élément basé sur HTML, sélectionnez l'option valeur?

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

Je suis à la recherche d'un code HTML/CSS seule méthode afin de n'afficher qu'un certain nombre de champs de formulaire. Je sais déjà comment le faire avec Javascript.

Est-il un moyen de faire cela?

Edit:

La question du titre est peut-être trompeuse. Je n'essaie pas de style de la boîte de sélection, c'est assez commun, et beaucoup de réponses sur la DONC déjà. Je suis essayait vraiment de style de la <P> élément en fonction de la valeur sélectionnée dans la <select>.

Comment jamais ce que j'essaye vraiment de le faire est d'afficher un certain nombre de champs d'un formulaire basé sur une valeur numérique:

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

Je voudrais afficher div.stuff-1 et div.stuff-2 lorsque le nombre d'animaux=2 et display div.stuff-1 div.stuff-2 et div.stuff-3 lorsque le nombre de choses=2.

Quelque chose comme cela violon

Double Possible: stackoverflow.com/questions/1895476/...
Vous pouvez sélectionner à l'aide d'un sélecteur d'attributs comme option[value="1"] mais prise en charge du navigateur n'est pas grande, firefox vous permet d'ajouter des styles mais chrome ne fonctionne pas. Je ne pense pas qu'il y est un moyen d'avoir le point indiqué en fonction de l'option sélectionnée sans JavaScript/jQuery.
Et voici un test pour montrer que les navigateurs prennent en charge sélecteur d'attribut - dev.l-c-n.com/CSS3-selectors/browser-support.php

InformationsquelleAutor hannson | 2013-05-09

22

Son appelé une sélecteur d'attribut
```
option[value="1"]
{
background-color:yellow;
} 
```
Exemple http://jsfiddle.net/JchE5/
- ne pas qu'il souhaite afficher une div sur la valeur plutôt que le style??
- mise à jour: question: je ne suis pas vraiment d'essayer de sélectionner l'option élément, je suis en train de sélectionner un élément p en fonction de l'option sélectionnée.
InformationsquelleAutor Kevin Bowersox
3

Vous pouvez utiliser

select option[value="1"]

mais prise en charge du navigateur de ne pas être fantastique.
- prise en charge du navigateur devrait être assez bon : caniuse.com/#feat=css-sel2
- Il ne signifie pas la prise en charge du navigateur pour les sélecteurs - il signifie la mise en plis pour sélectionner & option balises.
InformationsquelleAutor adnrw
2

Cela nécessite probablement une parent sélecteur de qui n'a pas été spécifié pour CSS2 ou CSS3.
- Sélecteur CSS "foo qui contient la barre"?
- Est-il un CSS sélecteur parent?
Un objet sélecteur de a été défini dans la CSS4 projet de travail à partir de Mai 2013, mais pas de navigateur, le fournisseur a encore mise en oeuvre.

Si la méthode en question fonctionne (en théorie) à l'aide de l'objet sélecteur reste à voir.

InformationsquelleAutor hannson

je crois qu'en "live" ou en temps réel, c'est possible avec du javascript ou jQuery. Envelopper potentiellement champs cachés dans des divs avec display: none onLoad et ont JS ou jQuery changer l'état de display: block ou si vous le souhaitez.

//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

j'utilise dans un de mes apps...

Possible avec PHP, mais avec PHP, vous devez envoyer la demande de changement ou vous pouvez écrire un code en php pour avoir certaines classes soient chargées basé sur déjà valeurs sélectionnées, par exemple

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

InformationsquelleAutor

Comment de cette 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;
}

Vous pouvez également utiliser label et cacher (de multiples façons) le input si nécessaire.. j'avoue que cela demande un peu de bricolage pour afficher la input et div des groupes à part, mais je pense que ça en vaut la peine.

InformationsquelleAutor LGT

Vous devez vous connecter pour publier un commentaire.