Zastosuj różne style do wprowadzania pola tekstowego, gdy puste (przy użyciu CSS)?

Question

Na przykład świeżo załadowany formularz zawiera <input type="text">, który ma zielony kolor tła. Gdy użytkownik wprowadzi wartość do pola, chciałbym, aby zamiast tego był w kolorze niebieskim.

Czy można to zrobić za pomocą CSS? Rozumiem, że istnieje selektor input[type='text'][value]. Nie oznacza to jednak żadnych zmian w formularzu wprowadzonym przez użytkownika po jego załadowaniu, więc jeśli formularz załadowano bez wartości, pozostanie on niezmieniony niezależnie od tego, co robi użytkownik.

Answer 1

Można dać textField atrybut required:

<input type="text" required /> 

a następnie sprawdzić ważność z CSS:

input:invalid { background: green; } 

lub odwrotnie (różne tylko dla starych przeglądarek):

input:valid { background: blue; } 

Answer 2

Można to zrobić tylko za pomocą JavaScript. Here's an example, który używa jQuery.

Jeśli chcesz zmienić tylko background-color na focus, możesz użyć trafnie nazwanego pseudo-selektora :focus. Here's an example of this.