Niestandardowe skrzynki wyboru nie działające w przeglądarce Firefox

Question

Próbuję utworzyć niestandardowe pola wyboru przy użyciu CSS3, który działa doskonale w przeglądarce Chrome. W przeglądarce Firefox ... nie tak bardzo.

Edit: wydaje się, że działa poprawnie na Firefox 37.

Poniższa odpowiedź jest nadal aktualna, ale kwestie związane z trybem od połowy 2013 roku zostały rozwiązane.

Wsparcie dla IE nie jest tutaj wymienione, ale poprawki/odpowiedzi dotyczące tego są mile widziane.

demo

HTML:

<input type="checkbox" id="first"/> 
<label for="first">This is pretty awesome</label> 

CSS:

input[type=checkbox] { 
    appearance: none; 
    background: transparent; 
    position: relative; 
} 
input[type=checkbox]::after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    text-align: center; 
    background: #aaa; 
    display: block; 
    pointer-events: none; 
    opacity: 1; 
    color: black; 
    border: 3px solid black; 
} 
input[type=checkbox] + label { 
    line-height: 48px; 
    margin: 0 15px 0 15px; 
} 
input[type=checkbox]:hover::after { 
    content: ''; 
    background: #32cd32; 
    opacity: .3; 
} 
input[type=checkbox]:checked::after { 
    content: '\2713'; 
    background: #32cd32; 
} 
input[type=checkbox]:checked:hover::after { 
    opacity: 1; 
} 
input[type=checkbox], 
input[type=checkbox]::after { 
    width: 48px; 
    height: 48px; 
    font-size: 46px; 
    line-height: 48px; 
    vertical-align: middle; 
    border-radius: 50%; 
} 
* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
} 

_{Uwaga: Usunąłem prefiksy dostawców i rzeczy jak użytkownik-wybierz dla zwięzłości. Pełny kod znajduje się w pisaku.}

Co muszę zmienić, aby wyglądał tak samo w Firefoksie, jak w przeglądarce Chrome?

Pożądany:

Nie życzenia:

Answer 1

udało mi się go naprawić jak wydaje się możliwe (to wciąż kocham lepsze rozwiązanie, jeśli taka istnieje). Przeszedłem wszystkie selektorów z

input[type=checkbox]::after 

do

input[type=checkbox] + label::after 

Wada:

• wymaga etykiety

Ale:

• HTML wymaga elementów wejściowych do mieć etykietę

Wniosek:

• złe tylko z powodu nieprawidłowej HTML

Answer 2

robi technicznie potrzebne etykiety, ale nie potrzebujemy kontroli nad znakiem aż do upewnij się, że istnieje docelowe rodzeństwo zaraz po polu wyboru.

tj.

input[type=checkbox] + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
} 
 

 
input[type=checkbox]:checked + span::after{ 
 
    display:block; 
 
    width:50px; 
 
    height:50px; 
 
    background:yellow; 
 
    display:block; 
 

 
}

<input type="checkbox"></input> 
 
    <span class="targetMe"></span>

cel przęsło za pomocą przełącznika i rodzeństwa Po elementów jak powyżej.

Równie dobrze można umieścić w Tho etykiet w tym momencie ...: P

Answer 3

Problemem jest to, że :after i ::after technicznie utworzyć element jako ostatni dziecka tego pierwiastka pseudoselector jest nakładana. Firefox nie lubi tworzyć dzieci w swoich polach wyboru. Jest to część większego tematu, który jest replaced elements.

Zobaczysz ten sam problem z :before i ::before pseudoelements nie pracuje nad wyboru ponieważ tworzą elementy jako pierwszy dziecko elementu wewnątrz elementu jest wybrany.