Form wechselnde Farbe, wenn Text eingegeben wird (CSS)

Question

Ich habe ein Formular mit einem Video im Hintergrund. Wenn in den Eingabefeldern kein Text eingegeben wird, möchte ich, dass sie eine Opazität 0 haben. Wenn der Wert jedoch nicht Null ist, möchte ich, dass sie eine Hintergrundfarbe haben. Ich dachte, dass ich Platzhalter dafür verwenden könnte.

Jetzt habe ich nur die Hintergrundfarbe zeigt, wenn der Eingang im Fokus ist, wie Sie unten

.for_ajax_contact #contactform input[type="text"]:focus, .for_ajax_contact #contactform textarea:focus { 
 
\t outline-width: 0; 
 
\t background-color: #fff; 
 
\t opacity: 0.8; 
 
\t transition: all 0.3s linear 0s !important; 
 
\t -webkit-transition: all 0.3s linear 0s !important; 
 
}

Jede Idee sehen kann?

Answer 1

Sie können dies ohne JavaScript tun, aber es gibt einen Haken. Sie müssen das HTML5-Attribut required auf der textarea/input verwenden und die Pseudoklasse :valid auf jedem Formularelement formatieren.

input, 
 
textarea { 
 
    background: white; 
 
} 
 

 
input:valid, 
 
textarea:valid { 
 
    background: green; 
 
    color: white; 
 
}

<input required type="text"> 
 

 
<textarea required></textarea>

Wenn dies nicht bevorzugt ist, werden Sie die JavaScript-Weg gehen müssen, wie ein Kommentator vorgeschlagen.

Answer 2

Es gibt eine CSS-Pseudoklasse :placeholder-shown, die erkennt, ob der Platzhalter vorhanden ist oder nicht. Leider ist dies in der Spezifikation für CSS Level 4 und es funktioniert nur in WebKit-Browsern zum Zeitpunkt des Schreibens.

input:placeholder-shown { 
 
    background: black; 
 
}

<input placeholder="Test" />