Tôi có thể chọn văn bản trống với CSS không?

Question

Có cách nào mà tôi có thể chọn một textarea mà $('#id_of_textarea').val() trong jQuery sẽ ''? Tôi đã thử sử dụng :empty. Tôi thấy rằng CSS cung cấp một cách để chọn đầu vào trống vì văn bản nằm trong thuộc tính value ([value=""]). Có một thuộc tính cho văn bản trong một vùng văn bản không?

Tôi đang tìm kiếm một selector sẽ làm việc với CSS, không chỉ jQuery.

Answer 1

giải pháp tốt nhất tôi có thể nghĩ đến là một workaround CSS 3. Đặt trường để yêu cầu (và không đặt nó khi gửi nếu cần). Sau đó, bạn có thể sử dụng

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

Answer 2

Bạn có thể sử dụng :empty css pseudo-class.

Xem ví dụ trong jsfiddle.

Trong ví dụ này có một nút cho động thêm textareas trống mới vào DOM, vì vậy bạn có thể thấy rằng các yếu tố mới cũng bị ảnh hưởng với pseudo-class.

Mã trong ví dụ này đã được thử nghiệm trong Firefox 5.0, Opera 11.50 và Chromium 12.

Ngoài ra, bạn có thể xem mô tả tốt cho: trống pseudo-class here.

Answer 3

Đối với những người đang sử dụng AngularJS, bạn có thể sử dụng ng-class theo quan điểm của bạn để thêm một lớp học để textarea của bạn để biết nếu nó là trống hay không.

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; 
} 

Đây là một jsfiddle.