Checkbox styling doesn't work on Safari mobile

user_1775531 0
Viewed 20349

I want to style the checkboxes like the following:

enter image description here

This is my 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";
}

This shows perfect on desktop and Chrome on mobile phones.

enter image description here

But the problem is with Safari on iPhone. It shows like this:

enter image description here

How can I fix this? Is there a fallback or something?

safari checkbox css html
3 Answers

Pseudo element :after or :before not working properly with input type element. So adding a pseudo element like after to them is not correct. So that add label next to checkbox and adding style for that.

.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>

user_62846610

Same issue i too faced once. I would suggest you to use images of check & uncheck as per your design. When user checked, image src should change to checked image. You can use javascript function for that. Make sure you use both same size of images. So that user can't feel those are 2 different images. For your reference, i'm attaching those images which i've used.

Check image

Uncheck image

Here is my code. Some where i've found for you. look over it. have given those images in my style sheet & rendering those in my javascript. When user clicked on checked image, 'selected' class i'm removing. So, that uncheck image will be shown to user.

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

Admin1
Related