Selettore CSS per etichetta legata all'input

Question

C'è un modo in CSS per selezionare label s associato ai campi input (tramite l'attributo for) con l'attributo required impostato? Qualcosa di simile:

label:input[required] { 
    ... 
} 

Attualmente, sto aggiungendo class="required" alle etichette e gli ingressi per lo styling. Ora ho l'attributo HTML5 required="required" nei campi di input richiesti. Sarebbe bello rimuovere gli attributi di classe ridondanti.

La closest answer ho trovato non utilizza attributo dell'elemento labelfor, ma richiederebbe che la label essere direttamente adiacente all'ingresso del HTML.

Answer 1

Che dire di CSS 2 Attribute Selectors È abbastanza compatibile tra i browser.

Esempio:

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

controllare anche this fuori.

Answer 2

Questa soluzione funziona nella maggior parte dei browser moderni:

<style> 

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

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

Answer 3

non credo che questo può davvero essere realizzato attraverso i CSS nel modo in cui il PO vuole. I CSS semplicemente non funzionano in questo modo.

Un approccio migliore secondo me è quello di fare un passo indietro e guardare il quadro generale. Hai una forma in cui alcuni campi sono obbligatori e altri no. È un buon approccio per fornire all'utente tutti i campi richiesti, o raggruppare insieme i campi richiesti, e tenerli chiaramente separati dai campi opzionali.

è possibile creare una struttura come

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

Ci sono una serie di vantaggi di questo approccio. Puoi aggiungere e rimuovere elementi dal gruppo 'richiesto' facilmente senza doverli modificare singolarmente. Puoi assegnare la classe 'required' più in alto della catena che vuoi. Se il modulo avesse la classe 'required', allora tutto in esso sarebbe etichettato come richiesto. Ci sono meno posti dove apportare modifiche, se decidete che la classe 'required' dovrebbe essere chiamata qualcos'altro. E in generale questo approccio ti aiuta anche ad organizzare meglio le tue forme. Non dovresti mescolare campi obbligatori e facoltativi.

Si potrebbe fare un ulteriore passo avanti e avere qualche javascript che inserirà l'attributo richiesto anche nei campi di input.

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