Übereinstimmung eines leeren Eingabefeldes mit CSS

Wie lege 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 required wird, required Sie mit input:valid

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

In modernen Browsern können Sie Folgendes verwenden :placeholder-shown um auf die leere Eingabe zu zielen (nicht zu verwechseln mit ::placeholder ).

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

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

Es gibt keinen Selektor in CSS, der dies tut. Attributselektoren entsprechen Attributwerten, nicht berechneten Werten.

Sie müssten JavaScript verwenden.

Wenn Sie den Wert eines Felds aktualisieren, wird das Wertattribut im DOM nicht aktualisiert. Deshalb entspricht Ihr Selektor immer einem Feld, auch wenn es nicht wirklich leer ist.

Verwenden Sie stattdessen die invalid Pseudo-class , um das zu erreichen, was Sie wollen, etwa so:

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

input[value=""] funktioniert nicht mit

  

aber arbeitete für mich in chrom mit

  

Aber der Stil wird sich nicht ändern, sobald jemand mit dem Tippen beginnt. Also solltest du js dafür benutzen.

Wenn die Unterstützung älterer Browser nicht erforderlich ist, können Sie eine Kombination aus required , valid und invalid .

Das Gute daran ist, dass die valid und invalid Pseudo-Elemente gut mit den Typ-Attributen der Eingabefelder funktionieren. 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#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 fügte eine class hinzu und styled mit css.

 .empty { background:none; } 

Das hat für mich funktioniert:

html: – Fügen Sie dem Eingabeelement das erforderliche Attribut hinzu

  

css: – Verwenden Sie: ungültiger Selektor

 input.my-input-element:invalid { } 

Anmerkungen:

  • Wert im Eingabeelement wird nicht benötigt.
  • Über erforderlich von w3Schools.com , “Wenn vorhanden, gibt es an, dass ein Eingabefeld ausgefüllt werden muss, bevor das Formular gesendet wird.”

Diese Frage mag schon vor einiger Zeit gestellt worden sein, aber da ich kürzlich zu diesem Thema auf der Suche nach der validation von Client-Seiten gekommen bin und die :placeholder-shown Unterstützung immer besser wird, dachte ich, dass das Folgende anderen helfen könnte.

Mit der Idee von Berend , diese CSS4-Pseudo-class zu verwenden, konnte ich eine Formular-validation erstellen, die nur ausgetriggers wurde, nachdem der Benutzer sie gefüllt hat.

Hier ist eine Erklärung und Erklärung zu CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ

Ich wundere mich über Antworten, die wir klar Attribut haben, um leere Eingabefelder zu bekommen, casting Sie einen Blick auf diesen Code

 /*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, um einen großartigen Blick auf die validation zu casting

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