tạo kiểu hộp kiểm mẫu css với các thẻ đã chọn và sau

Question

Tôi đang cố gắng thiết kế biểu mẫu mà không cần sử dụng JavaScript hoặc JQuery. Nó bao gồm một loạt các hộp kiểm. Ý tưởng là để hiển thị một gif nhất định sau khi hộp kiểm nếu nó được bỏ chọn. Nếu không, sẽ không hiển thị gì sau nó. Đây là mã tôi có:

input[type=checkbox]::after 
{ 
    content: url(images/unchecked_after.gif); 
    position:relative; 
    left:15px; 
    z-index:100; 
} 
input[type=checkbox]:checked::after 
{ 
    content:""; 
} 

Nó hoạt động trong Chrome nhưng dường như không hoạt động trong Firefox hoặc IE. Chuyện gì thế?

Answer 1

Giải pháp trình duyệt chéo hoạt động cho tôi là bao gồm nhãn trống (có lớp "checkbox_label") sau khi nhập hộp kiểm và sau đó là kiểu IT thay vì hộp kiểm.

input[type=checkbox] + label:after 
{ 
    content: url(images/unchecked_after.gif); 
    position:relative; 
    left:0px; 
    top:1px; 
    z-index:100; 
} 

input[type=checkbox]:checked + label:after 
{ 
    content:""; 
} 

.checkbox_label 
{ 
    height:0px; 
    width:0px; 
    display:inline-block; 
    float:left; 
    position:relative; 
    left:20px; 
    z-index:100; 
} 

Answer 2

Rõ ràng, việc sử dụng các yếu tố giả ::before và ::after không được hỗ trợ bởi đặc điểm kỹ thuật. Câu hỏi của bạn được trả lời here. Hy vọng rằng sẽ giúp!