web-dev-qa-db-fra.com

Sélecteur CSS pour étiquette liée à l'entrée

Existe-t-il un moyen dans CSS de sélectionner labels lié aux champs input (via l'attribut for) ayant l'attribut required défini? Quelque chose comme:

label:input[required] {
  ...
}

Actuellement, j'ajoute class="required" aux étiquettes et aux entrées pour le style. J'ai maintenant l'attribut HTML5 required="required" dans les champs de saisie obligatoires. Il serait bien de supprimer les attributs de classe redondants.

Le plus proche réponse que j'ai trouvé n'utilise pas l'attribut label de l'élément for, mais nécessiterait que le label soit directement adjacent à l'entrée dans le code HTML.

csscss-selectorscss3
26
Ted Bergeron

Que diriez-vous de Sélecteurs d'attributs CSS 2 Il est plutôt compatible entre les navigateurs.

Exemple:

<style>
label[required=required]
{
color: blue;
}
</style>
<label required="required" for="one">Label:</label><input name="one" id="one" />

Vérifiez également this out.

7
Tom

Cette solution fonctionne dans la plupart des navigateurs modernes:

<style>

label > input[required="required"] {
    background: red; 
}

</style>
<label for="myField"><input required="required" id="myField" /></label>
4
Umberto Babini

Je ne pense pas que cela puisse être vraiment accompli par CSS comme le veut le PO. CSS ne fonctionne tout simplement pas de cette façon.

À mon avis, une meilleure approche consiste à prendre du recul et à regarder la situation dans son ensemble. Vous avez un formulaire où certains champs sont obligatoires et d'autres non. C'est une bonne approche de donner d'abord à l'utilisateur tous les champs obligatoires, ou de regrouper les champs obligatoires ensemble, et de les séparer clairement des champs optionnels.

Vous pouvez créer une structure telle que

<form>
     <ul class="required_fields">
       <li>
          <label>username</label>
          <input />
       </li>
       <li>
          <label>email</label>
          <input />
       </li>
     </ul
     <ul class="optional_fields">
          ...
     </ul>
 </form>

/* CSS */
.required_fields label {font-weight: bold} 
.required_fields label:after { content: "*"; color: red } /*more styles for labels*/

Cette approche présente plusieurs avantages. Vous pouvez facilement ajouter et supprimer des éléments du groupe "requis" sans avoir à les modifier individuellement. Vous pouvez affecter la classe "requise" aussi haut que vous le souhaitez dans la chaîne. Si le formulaire comportait la classe "obligatoire", alors tout ce qui y figurerait serait étiqueté de la manière requise. Il y a moins de place pour faire des changements si vous décidez que la classe 'obligatoire' devrait être appelée autre chose. Et en général, cette approche vous aide également à mieux organiser vos formulaires. Vous ne devez pas mélanger les champs obligatoires et facultatifs.

Vous pourriez aller un peu plus loin et avoir du javascript qui injectera également l'attribut requis dans les champs de saisie. 

$(".required_fields input").each(function(){
   this.setAttribute('required', 'required');
});
0
mastaBlasta

vous pouvez utiliser label [for = "title"] où "title" est l'identifiant de votre entrée. Exemple:

<label for="title">Title</label>
<input type="text" id="title" name="title">

css: étiquette [pour = "titre"] { couleur: bleu; }

0
Cristian Oana