Corrispondenza di una casella di input vuota tramite CSS

Come posso applicare uno stile a una casella di input vuota? Se l'utente digita qualcosa nel campo di input, lo stile non dovrebbe più essere applicato. Questo è possibile nei CSS? Ho provato questo:

input[value=""]

Se solo il campo fosse, requiredpotresti andare coninput:valid

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

 <input type="text" id="foo-thing" required="required">
 <span class="msg" style="visibility: hidden;">Yay not empty</span>

Guarda dal vivo su jsFiddle

OPPURE negare l'utilizzo #foo-thing:invalid(credito a @SamGoody)

Nei browser moderni è possibile utilizzare :placeholder-showncome target l'input vuoto (da non confondere ::placeholder).

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

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

Non esiste un selettore nei CSS che lo faccia. 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, pertanto il selettore corrisponde sempre a un campo, anche quando non è effettivamente vuoto.

Usa invece la invalidpseudo-classe per ottenere ciò che vuoi, in questo modo:

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

<input required type="text" value="">

<input required type="text" value="Value">

input[value=""], input:not([value])

lavora con:

<input type="text" />
<input type="text" value="" />

Ma lo stile non cambierà non appena qualcuno inizierà a digitare (è necessario JS per quello).

In caso contrario è necessario che supportano browser legacy, è possibile utilizzare una combinazione di required, valide invalid.

La cosa buona di utilizzare questo è l' valide invalidpseudo-elementi funzionano bene con tutti gli attributi 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 type="email" name="email" placeholder="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

Per riferimento, JSFiddle qui: http://jsfiddle.net/0sf6m46j/

$('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 un corso e disegnato con css.

.empty { background:none; }

Questo ha funzionato per me:

Per l'HTML, aggiungi l' requiredattributo all'elemento input

<input class="my-input-element" type="text" placeholder="" required />

Per il CSS, utilizzare il :invalidselettore per indirizzare l'input vuoto

input.my-input-element:invalid {

}

Appunti:

• Informazioni requiredsu w3Schools.com : "Se 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 dato che sono recentemente apparsa su questo argomento in cerca di convalida dei moduli sul lato client e poiché il :placeholder-shown supporto sta migliorando, ho pensato che ciò che segue potesse aiutare gli altri.

Usando l' idea di Berend di usare questa pseudo-classe CSS4, sono stato in grado di creare una convalida del modulo attivata solo dopo che l'utente ha terminato di riempirla.

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

Ha funzionato per me aggiungere un nome di classe all'input e quindi applicare le regole CSS a questo:

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

Se sei felice di non supportare IE o pre-Chromium Edge (che potrebbe andare bene se lo stai usando per un miglioramento progressivo), puoi usare :placeholder-showncome ha detto Berend. Tieni presente che per Chrome e Safari hai effettivamente bisogno di un segnaposto non vuoto perché funzioni, anche se uno spazio funziona.

*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}

<fieldset>
  <legend>
    Floating labels example (no-JS)
  </legend>
  <label class="floating-label">
    <input type="text" placeholder=" ">
    <span>Username</span>
  </label>
  <label class="floating-label">
    <input type="Password" placeholder=" ">
    <span>Password</span>
  </label>
</fieldset>
<p>
  Inspired by Bootstrap's <a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating labels</a>.
</p>

Mi chiedo le risposte che abbiamo attributo chiaro per ottenere caselle di input vuote, dare 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 ottimo aspetto nella convalida

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

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

Mi rendo conto che questo è un thread molto vecchio, ma le cose sono cambiate un po 'da allora e mi ha aiutato a trovare la giusta combinazione di cose di cui avevo bisogno per risolvere il mio problema. Quindi ho pensato di condividere quello che ho fatto.

Il problema era che avevo applicato lo stesso css per un input facoltativo se fosse stato compilato, come avevo richiesto per un riempimento richiesto. Il CSS utilizzava la classe psuedo: valido che applicava il CSS sull'input opzionale anche quando non compilato.

È così che l'ho risolto;

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}