css formularz zaznaczania stylów ze znacznikami zaznaczonymi i po [duplikat] - css, css3, cross-browser, pseudoelement, zawartość css

Próbuję zaprojektować formularz bez użyciaJavaScript lub JQuery. Zawiera szereg pól wyboru. Pomysł polega na wyświetleniu określonego gif po polu wyboru, jeśli nie jest zaznaczone. W przeciwnym razie nie wyświetlaj nic po tym. To jest kod, który mam:

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

Działa w Chrome, ale nie działa w Firefoksie lub IE. Co jest nie tak?

Odpowiedzi:

Rozwiązanie dla różnych przeglądarek, które działało dla mnie, polegało na dołączeniu pustej etykiety (z klasą „checkbox_label”) po wejściu do pola wyboru, a następnie na styl IT zamiast pola wyboru.

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

Najwyraźniej, używając ::before i ::after pseudoelementy nie są obsługiwane przez specyfikację. Twoje pytanie zostanie udzielone tutaj. Mam nadzieję, że pomaga!