Abgleichen eines leeren Eingabefelds mit CSS

Wie wende ich einen Stil auf ein leeres Eingabefeld an? Wenn der Benutzer etwas in das Eingabefeld eingibt, sollte der Stil nicht mehr angewendet werden. Ist das in CSS möglich? Ich habe es versucht:

input[value=""]

Wenn nur das Feld ist required, könnten Sie mit geheninput: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>

Sehen Sie live auf jsFiddle

ODER negieren mit #foo-thing:invalid(Gutschrift an @SamGoody)

In modernen Browsern können Sie :placeholder-showndie leere Eingabe als Ziel festlegen (nicht zu verwechseln ::placeholder).

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

Weitere Informationen und Browserunterstützung: https://css-tricks.com/almanac/selectors/p/placeholder-shown/

In CSS gibt es keinen Selektor, der dies tut. Attributselektoren stimmen mit Attributwerten überein, nicht mit berechneten Werten.

Sie müssten JavaScript verwenden.

Durch das Aktualisieren des Werts eines Felds wird das Wertattribut im DOM nicht aktualisiert. Daher stimmt Ihr Selektor immer mit einem Feld überein, auch wenn es nicht wirklich leer ist.

Verwenden Sie stattdessen die invalidPseudoklasse , um das zu erreichen, was Sie wollen:

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])

arbeitet mit:

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

Der Stil ändert sich jedoch nicht, sobald jemand mit der Eingabe beginnt (dafür benötigen Sie JS).

Wenn unterstützt ältere Browser nicht benötigt wird, können Sie eine Kombination aus verwenden required, validund invalid.

Die gute Sache über diese Verwendung ist validund invalidPseudoelemente arbeiten gut mit den Typeigenschaften Eingabefelder ein . Beispielsweise:

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="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

Als Referenz JSFiddle hier: 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. Ich habe eine Klasse hinzugefügt und mit CSS gestylt.

.empty { background:none; }

Das hat bei mir funktioniert:

Fügen Sie für den HTML-Code das requiredAttribut zum Eingabeelement hinzu

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

Verwenden Sie für das CSS den :invalidSelektor, um auf die leere Eingabe zu zielen

input.my-input-element:invalid {

}

Anmerkungen:

• Info requiredvon w3Schools.com : "Wenn vorhanden, wird angegeben, dass vor dem Absenden des Formulars ein Eingabefeld ausgefüllt werden muss."

Diese Frage wurde vielleicht vor einiger Zeit gestellt, aber als ich kürzlich auf der Suche nach einer clientseitigen Formularvalidierung auf dieses Thema gestoßen bin und der :placeholder-shown Support immer besser wird, dachte ich, dass das Folgende anderen helfen könnte.

Mit der Idee von Berend , diese CSS4-Pseudoklasse zu verwenden, konnte ich eine Formularvalidierung erstellen, die erst ausgelöst wurde, nachdem der Benutzer das Ausfüllen abgeschlossen hatte.

Hier finden Sie Ademo und Erklärungen zu CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Wenn Sie glücklich sind, IE oder Pre-Chromium Edge nicht zu unterstützen (was in Ordnung sein kann, wenn Sie dies für die progressive Verbesserung verwenden), können Sie es verwenden, :placeholder-shownwie Berend gesagt hat. Beachten Sie, dass Sie für Chrome und Safari tatsächlich einen nicht leeren Platzhalter benötigen, damit dies funktioniert, obwohl ein Leerzeichen funktioniert.

*,
 ::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>

Es hat bei mir funktioniert, der Eingabe einen Klassennamen hinzuzufügen und dann CSS-Regeln darauf anzuwenden:

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

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

Ich frage mich, welche Antworten wir haben, um leere Eingabefelder zu erhalten. Schauen Sie sich diesen Code an

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

AKTUALISIEREN

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

Mehr dazu für einen guten Blick in die Validierung

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

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

Mir ist klar, dass dies ein sehr alter Thread ist, aber die Dinge haben sich seitdem ein wenig geändert und es hat mir geholfen, die richtige Kombination von Dingen zu finden, die ich brauchte, um mein Problem zu beheben. Also dachte ich, ich würde teilen, was ich getan habe.

Das Problem war, dass ich für eine optionale Eingabe das gleiche CSS anwenden musste, wenn es gefüllt war, wie für eine gefüllte Eingabe. Das CSS verwendete die Pseudo-Klasse: valid, die das CSS auch dann auf die optionale Eingabe anwendete, wenn es nicht gefüllt war.

So habe ich es behoben;

HTML

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

CSS

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