Checkbox stylizacji nie działa w Safari komórkowego

Question

chcę projektować pola wyboru tak:

To mój CSS:

.checkboxcontact input[type="checkbox"] { 
    -webkit-appearance: none; 
    background-color: white; 
    border: 1px solid #d44803; 
    padding: 9px; 
    border-radius: 3px; 
    display: inline-block; 
    position: relative; 
    float:left; 
} 

.checkboxcontact input[type="checkbox"]:checked { 
    background-color: #d44803; 
    border: 1px solid white; 
    color: #fff; 
} 

.checkboxcontact input[type="checkbox"]:checked:after { 
    content: '\2714'; 
    font-size: 14px; 
    position: absolute; 
    top: 0; 
    left: 3px; 
    color: #fff; 
    font-family: "FontAwesome"; 
} 

To pokazuje idealny na pulpicie i Chrome w telefonach komórkowych.

Ale jest problem z Safari na iPhone. To pokazuje, jak ten:

Jak mogę rozwiązać ten problem? Czy jest coś awaryjnego?

Answer 1

Jak zasugerowano powyżej, elementy pseudo nie działają dobrze z wejściami jednak, że będzie to dobry pomysł, aby owinąć pole wewnątrz etykietę - to W3C Ważne, aby działał zgodnie z przeznaczeniem i nie musisz używać etykiety for dla etykiety, ani nie używaj pola wyboru wejściowego id.

Oto HTML:

<label class="custom-checkbox"> 
    <input type="checkbox" value="checkbox1"> 
    <span>Checkbox</span> 
</label> 

Kod jest wszechstronny mało, więc jeśli trzeba tylko pole bez etykiety, po prostu opuścić przedział pusty - trzeba zachować tag choć - lub alternatywnie możesz utworzyć własną niestandardową klasę, aby zastosować pseudoelementy na samej etykiecie.

Oto CSS:

.custom-checkbox { 
    position: relative; 
    display: block; 
    margin-top: 10px; 
    margin-bottom: 10px; 
    line-height: 20px; 
} 

.custom-checkbox span { 
    display: block; 
    margin-left: 20px; 
    padding-left: 7px; 
    line-height: 20px; 
    text-align: left; 
} 

.custom-checkbox span::before { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    left: 0; 
    background: #fdfdfd; 
    border: 1px solid #e4e5e7; 
    @include vendorize(box-shadow, inset 2px 2px 0px 0px rgba(0, 0, 0, 0.1)); 
} 

.custom-checkbox span::after { 
    display: block; 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    top: 0; 
    left: 0; 
    font-size: 18px; 
    color: #0087b7; 
    line-height: 20px; 
    text-align: center; 
} 

.custom-checkbox input[type="checkbox"] { 
    opacity: 0; 
    z-index: -1; 
    position: absolute; 
} 

.custom-checkbox input[type="checkbox"]:checked + span::after { 
    font-family: "FontAwesome"; 
    content: "\f00c"; 
    background:#d44803; 
    color:#fff; 
} 

A oto skrzypce robocze: https://jsfiddle.net/ee1uhb3g/

Zweryfikowane przetestowany na wszystkich przeglądarkach - FF, Chrome, Safari, IE, itp

Answer 2

Ten sam problem też raz spotkałem. Sugerowałbym, abyś używał obrazów czeku & odznaczenie zgodnie z projektem. Po zaznaczeniu przez użytkownika obraz src powinien zmienić się na sprawdzony obraz. Możesz użyć do tego funkcji javascript. Upewnij się, że używasz obu rozmiarów obrazów. Aby użytkownik nie czuł, że są to 2 różne obrazy. Dla odniesienia, przytwierdzam te obrazy, które użyłem.

Check image

Uncheck image

Oto mój kod. Niektóre gdzie znalazłem dla ciebie. spójrz na to. nadałem te obrazy w moim arkuszu stylów & renderowania tych w moim javascript. Gdy użytkownik kliknął zaznaczony obraz, "wybrana" klasa, którą usunąłem. Tak, to odznaczenie obrazu zostanie pokazane użytkownikowi.

function ClearSelection() { 
 
    $(".filterlist ul li").each(function() { 
 
     $(this).removeClass("selected"); 
 
    }); 
 
}

.filterlist ul li 
 
{ 
 
\t padding:5px; 
 
\t border-bottom:1px solid gray; 
 
\t cursor:pointer; \t 
 
\t background-image: url("../images/untick.png"); 
 
\t background-repeat:no-repeat; 
 
\t background-position: 10 8; 
 
} 
 
.filterlist ul li.selected{background-image: url("../images/tick.png");}

Answer 3

Pseudo elementem :after lub :before nie działa prawidłowo z input type elementu. Dodanie pseudo elementu, takiego jak potem, nie jest poprawne. Aby dodać etykietę obok pola wyboru i dodać do tego styl.

.checkboxcontact label { 
 
    display: inline-block; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    padding-left: 5px; 
 
} 
 
.checkboxcontact input[type="checkbox"] { 
 
    opacity: 0; 
 
} 
 
.checkboxcontact label::before { 
 
    content: ""; 
 
    display: inline-block; 
 
    position: absolute; 
 
    width: 17px; 
 
    height: 17px; 
 
    left: 0; 
 
    margin-left: -20px; 
 
    border: 1px solid #d44803; 
 
    border-radius: 3px; 
 
    background-color: #fff;  
 
} 
 

 
.checkboxcontact input[type="checkbox"]:checked + label::before, 
 
.checkboxcontact input[type="checkbox"]:focus + label::before { 
 
    background-color: #d44803; 
 
    border: 1px solid white; 
 
} 
 

 
.checkboxcontact input[type="checkbox"]:checked + label::after { 
 
    content: '\f00c'; 
 
    font-size: 14px; 
 
    position: absolute; 
 
    top: 2px; 
 
    left: -17px; 
 
    color: #fff; 
 
    font-family: "FontAwesome"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="checkboxcontact"> 
 
    <input type="checkbox" id="check1"/> 
 
    <label for="check1"> 
 
     Check me out 
 
    </label> 
 
</div>