Những yếu tố nào hỗ trợ :: trước và sau phần tử giả?

Question

Tôi đang cố gắng để đến với một số phong cách mặc định tốt cho <input> s trong HTML5 và thử như sau:

input::after   { display: inline; } 
input:valid::after { content: ' ✓ '; color: #ddf0dd; } 
input:invalid::after { content: ' ✗ '; color: #f0dddd; } 

Alas, nội dung ::after không bao giờ xuất hiện. Nó không phải là một vấn đề với các dấu hai chấm so với đơn cho các phần tử giả; Tôi đã thử cả hai. Nó cũng không phải là vấn đề với việc có một phần tử giả và một lớp giả; Tôi đã thử nó mà không cần :valid và :invalid. Tôi nhận được hành vi tương tự trong Chrome, Safari, và Firefox (Firefox không có :valid và :invalid pseudo-lớp học, nhưng tôi đã cố gắng mà không những.)

Các giả thành phần hoạt động tốt trên <div>, <span>, <p> và <q> yếu tố - một số trong đó là các phần tử khối và một số là nội tuyến.

Vì vậy, câu hỏi của tôi là: tại sao các trình duyệt đồng ý rằng <input> s không có ::after? Tôi không thể tìm thấy bất cứ điều gì trong spec đó sẽ chỉ ra điều này.

Answer 1

Như bạn có thể đọc tại đây http://www.w3.org/TR/CSS21/generate.html,: sau khi chỉ hoạt động trên các phần tử có nội dung (cây tài liệu). <input> không có nội dung, cũng như <img> hoặc <br>.

Answer 2

Webkit cho phép bạn thực hiện :: sau khi nhập các yếu tố đầu vào. Nếu bạn muốn một cách để làm cho nó hoạt động trong Firefox, bạn có thể thử sử dụng :: sau trên nhãn của đầu vào chứ không phải là đầu vào.

Answer 3

Bạn có thể đặt khoảng trước hoặc sau phần tử. Ví dụ:

<style> 
#firstName:invalid+span:before { 
    content: "** Not OK **"; 
    color: red; 
} 
</style> 

<input type="text" name="firstName" id="firstName" placeholder="John" 
    required="required" 
    title="Please enter your first name (e.g. John)" 
    /><span>&nbsp;</span>