Abbinare una casella di input vuota usando CSS

Come posso applicare uno stile a una casella di input vuota? Se l’utente digita qualcosa nel campo di input, lo stile non deve più essere applicato. È ansible in CSS? Ho provato questo:

input[value=""] 

Se è required solo il campo, puoi andare con l’ input:valid

 #foo-thing:valid + .msg { visibility: visible!important; } 
    

Nei browser moderni è ansible utilizzare :placeholder-shown per indirizzare l’input vuoto (da non confondere con ::placeholder ).

 input:placeholder-shown { border: 1px solid red; /* Red border only if the input is empty */ } 

Maggiori informazioni e supporto browser: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

Non c’è nessun selettore in CSS che faccia questo. I selettori di attributo corrispondono ai valori degli attributi, non ai valori calcolati.

Dovresti usare JavaScript.

L’aggiornamento del valore di un campo non aggiorna l’attributo value nel DOM, quindi è per questo che il selettore corrisponde sempre a un campo, anche quando non è effettivamente vuoto.

Usa invece la pseudo-class invalid per ottenere ciò che vuoi, in questo modo:

 input:required { border: 1px solid green; } input:required:invalid { border: 1px solid red; } 
   

input[value=""] non funziona con

  

ma ha lavorato per me in cromo con

  

Ma lo stile non cambierà non appena qualcuno inizierà a digitare. Quindi dovresti usare js per quello.

Se il supporto dei browser legacy non è necessario, è ansible utilizzare una combinazione di required , valid e invalid .

L’aspetto positivo nell’usare questo è che gli pseudo-elementi valid e invalid funzionano bene con gli attributi di tipo dei campi di input. Per esempio:

 input:invalid, textarea:invalid { box-shadow: 0 0 5px #d45252; border-color: #b03535 } input:valid, textarea:valid { box-shadow: 0 0 5px #5cd053; border-color: #28921f; } 
    
 $('input#edit-keys-1').blur(function(){ tmpval = $(this).val(); if(tmpval == '') { $(this).addClass('empty'); $(this).removeClass('not-empty'); } else { $(this).addClass('not-empty'); $(this).removeClass('empty'); } }); 

in jQuery. Ho aggiunto una class e uno stile con css.

 .empty { background:none; } 

Questo ha funzionato per me:

html: – aggiungi l’attributo richiesto all’elemento di input

  

css: – use: selettore non valido

 input.my-input-element:invalid { } 

Gli appunti:

  • il valore nell’elemento di input non è necessario.
  • Informazioni su richiesta da w3Schools.com , “Quando presente, specifica che un campo di input deve essere compilato prima di inviare il modulo.”

Questa domanda potrebbe essere stata posta qualche tempo fa, ma mentre di recente mi sono imbattuto in questo argomento alla ricerca della convalida del modulo sul lato client, e poiché il supporto :placeholder-shown sta migliorando, ho pensato che quanto segue potrebbe aiutare gli altri.

Usando l’idea di Berend di usare questa pseudo-class CSS4, sono stato in grado di creare una convalida del modulo triggersta solo dopo che l’utente ha finito di riempirla.

Ecco ademo e spiegazione su CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Mi chiedo in base alle risposte che abbiamo un attributo chiaro per ottenere caselle di input vuote, date un’occhiata a questo codice

 /*empty input*/ input:empty{ border-color: red; } /*input with value*/ input:not(:empty){ border-color: black; } 

AGGIORNARE

 input, select, textarea { border-color: @green; &:empty { border-color: @red; } } 

Più oltre per avere un bell’aspetto nella convalida

  input, select, textarea { &[aria-invalid="true"] { border-color: amber !important; } &[aria-invalid="false"], &.valid { border-color: green !important; } }