Czy mogę wybrać puste teksty z CSS?

Question

Czy istnieje sposób, że mogę wybrać textarea takie, że $('#id_of_textarea').val() w jQuery będzie ''? Próbowałem użyć :empty. Widziałem, że CSS zapewnia sposób wybierania pustych danych wejściowych, ponieważ tekst jest w atrybucie value ([value=""]). Czy istnieje atrybut dla tekstu w obszarze tekstowym?

Szukam selektora, który będzie działał z CSS, a nie tylko jQuery.

Answer 1

Najlepsze rozwiązanie, jakie przychodzi mi do głowy, to obejście CSS 3. Ustaw pole na wymagane (i anuluj je, jeśli to konieczne, w razie potrzeby). Następnie można użyć

textarea:invalid { /* style here... probably want to remove box-shadow and such */ } 

Answer 2

Możesz użyć pseudo-klasy css .

Zobacz przykład w dokumencie jsfiddle.

W przykładzie znajduje się przycisk do dynamicznego dodawania nowych pustych tekstów do DOM, dzięki czemu można zauważyć, że nowe elementy również zostaną dotknięte pseudoklasą.

Kod w przykładzie badano w Firefox 5.0, Opera 11.50 i chromu 12.

Ponadto, można zobaczyć dobry opis dla: pusty pseudo-klasy here.

Answer 3

dla tych, którzy są przy użyciu angularjs, można użyć ng-class w celu dodać klasę do pola tekstowego, aby wiedzieć, czy jest pusty czy nie.

HTML:

<textarea ng-model="myForm.myTextArea" 
      ng-class="(myForm.myTextArea.length)?'not_empty':'empty'"> 
</textarea> 

CSS:

textarea.empty { 
    background-color:red; 
} 
textarea.not_empty { 
    background-color:blue; 
} 

Oto jsfiddle.