J'essaie d'avoir des entrées de fichiers et je ne les montrer que si le précédent a été rempli. Cela peut également utiliser CSS 3.
3 Réponses :
Pour sélectionner des champs vides, vous pouvez essayer j'ai testé sur jsfiddle. Il y avait au moins, j'ai besoin de définir un attribut de valeur vide sur la balise d'entrée pour qu'il fonctionne à l'aide de l'opérateur "+" comme vous l'avez fait dans votre exemple Faites correspondre deux entrées de fichier distinctes, une juste après l'autre. Il n'examine pas deux attributs de la même balise que vous semblez vouloir.
Ce que je veux, c'est seulement montrer 1 entrée au début, une fois que celui-ci a eu un fichier sélectionné, montrez le second, et ainsi de suite. J'ai testé votre suggestion et cela ne change pas une fois le fichier sélectionné. Il ne concerne que la valeur initiale de l'attribut "valeur" et ne fait rien quand il change.
@Manixrock CSS ne peut pas être utilisé comme ceci - les sélecteurs ne sont évalués qu'une fois lorsque la page est chargée, et c'est tout. Vous aurez besoin de JavaScript pour cela
@Yi jiang - ce n'est pas tout à fait vrai: entrée {margin-gauche: 10px; } Entrée: vérifié {margin-gauche: 20px; } ; Ajoutez une entrée de case à cocher, et lorsque vous vérifiez cela, il se déplacera à droite; Décochez-la et il passera à gauche; Cela prouve que CSS est évalué au moment de l'exécution de la page, non seulement lors du chargement. Je cherche quelque chose comme ça, mais je suis adapté aux intrants de fichiers.
@YI JIANG: Les sélecteurs sont évalués chaque fois que DOM change. Cependant, Attribut de valeur DOM contient uniquement la valeur par défaut et non de la valeur actuelle (qui est une propriété DOM non visible pour CSS).
@pornel Oui, tu as raison. J'aurais dû clarifier ce que je voulais dire quand je l'ai dit. Mais mon point est toujours debout - vous ne pouvez pas faire avec CSS seul.
Pour développer le commentaire de Yi Jiang, sélecteurs contre l'attribut « valeur » ne remarqueront pas des modifications à la propriété « valeur ». L'attribut « valeur » est liée à la "defaultValue "propriété , tandis que le " valeur " propriété est lié à aucun attribut (grâce à porneL pour avoir signalé).
Note il y a une relation similaire avec le « vérifié "attribut et" defaultChecked a > » et " vérifié " propriétés ; si vous utilisez un sélecteur d'attribut Essayez la page de test suivant:. P> [vérifié] code> plutôt que la pseudo-classe : checked code>, vous ne verrez pas le style changent lorsque les changements d'état de la case à cocher. Contrairement à la "checked" famille, "valeur" ne dispose pas d'une pseudo-classe correspondant que vous pouvez utiliser p> <style>
a input {
display: none;
}
:not(a) + a input,
a:visited + a input
{
display: block /* or "inline" */ ;
}
</style>
...
<a href="#asuhacrpbt"><input type="file" ... /></a>
<a href="#cmupbnhhpw"><input type="file" ... /></a>
<a href="#mcltahcrlh"><input type="file" ... /></a>
Pour clarifier: Sélectors correspondant à Attribut Attribut sont toujours réévalués de manière dynamique chaque fois que la valeur attribute changements, et il fonctionne dans Tous les navigateurs prenant en charge les sélecteurs CSS2. CSS ne fait pas exception ici. La partie déroutante est que valeur attribut est non mis à jour en réponse à Valeur Attribut Maps vers DefaultValue DOM Propriété et Valeur Propriété < / i> n'a pas d'attribut Dom correspondant . JS et HTML / CSS sont deux mondes différents.
Eh bien, cela fonctionne si le defaultValue est mis à jour via JavaScript (jQuery pour simplification): jQuery ('entrée [type = fichier]') .change (fonction (e) {this.defaultvalue = cela.value;});
@feeela c'est génial! Des descentes connues?
Un exemple d'une valeur de milliers de mots: Afficher x entrée x, une à la fois
L'idée est simple, si une entrée définie comme requise est vide, elle n'est pas valide. À partir de là, tout ce que vous avez à faire est de définir toutes les contributions nécessaires et d'utiliser la classe pseudo invalide. Devrait bien travailler avec l'étiquette aussi.
L'inconvénient est que vous devez remplir toutes les contributions, ce qui le rendait inébranlable, ce n'est pas vraiment dynamique, autant que je recherchais cela ne peut être complètement réalisé sans JS
Ajout de nonalidate à la balise de formulaire permet d'envoyer le formulaire avec une entrée vide. Je ne sais pas si cela vaut la peine. Nombre dynamique d'entrée ne sera pas réalisable sans JS de toute façon.