Un campo di input è valido mentre è vuoto?

Ho sperimentato pseudo classi e pseudo elementi CSS e ho scoperto qualcosa che non sono stato in grado di aggirare.Un campo di input è valido mentre è vuoto?

consideri il seguente campo di input html:

<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" /><span></span>

Per raggiungere 3 stati: vuoti, validi e non validi. Sto usando l'elemento pseudo :: after (applicato allo span adiacente all'input) per aggiungere un segno di spunta quando il valore del file è valido e una X quando il valore non è valido.

Sto usando le pseudo classi: valido e: non valido e sembra che quando un campo di input è vuoto (value = "") il suo stato sia valido.

Il CSS in questione è la seguente:

.v3_forms input[value=""] + span::after { 
    content: ""; 
} 
.v3_forms input:valid + span::after { 
    content: "\2713"; 
    color: limegreen; 
} 
.v3_forms input:invalid + span::after { 
    content: "X"; 
    color: #ce0000; 
}

per quello che sto in grado di dire, dopo aver ripulito il valore nel browser, il secondo regole CSS ha la precedenza, anche se la specificità è la stessa .
Ho testato i selettori qui: specificity calculator e sembra che gli attributi e le pseudo classi abbiano lo stesso peso.

fonte

2015-07-11 jnkrois

Credo che debba essere contrassegnato con l'attributo 'required' se si desidera disabilitare i valori vuoti. Dovrei rivedere le specifiche per sapere di sicuro, però. –

Sì, e puoi vedere questo in azione qui: https://css-tricks.com/almanac/selectors/v/valid/ – Deryck

Per i tuoi problemi di specificità: le regole di abbinamento della stessa specificità sono applicate nell'ordine in cui esse si verificano nella sorgente, vale a dire che l'ultima regola può sovrascrivere le proprietà delle regole precedenti. –

Una stringa vuota è, per default, un valore valido:

utente dovrebbero consentire all'utente di impostare il valore della stringa vuota *.

Se si desidera richiedere un valore per il campo, è necessario aggiungere l'attributo required:

.v3_forms input[value=""] + span::after { 
 
    content: ""; 
 
} 
 
.v3_forms input:valid + span::after { 
 
    content: "\2713"; 
 
    color: limegreen; 
 
} 
 
.v3_forms input:invalid + span::after { 
 
    content: "X"; 
 
    color: #ce0000; 
 
}

<div class="v3_forms"> 
 
<input type="number" value="1" min="1" max="1000" step="1" pattern="\d" required /><span></span> 
 
</div>

Questo risolve l'esempio specifico nella tua domanda, ma lo stesso sarà valido per tutti gli elementi <input /> che accettano l'input dell'utente.

* Vedere il riferimento whatwg.

fonte

2015-07-11 06:15:10

Un campo di input è valido mentre è vuoto?

risposta

Problemi correlati