Checkbox styling doesn't work on Safari mobile

I want to style the checkboxes like the following:

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.

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

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

3 Answers

Answers 1

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>

Answers 2

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

Answers 3

as it was suggested above, pseudo elements don't work well with inputs, however, it would be a good idea to wrap the checkbox inside the label - it is w3c valid, so that it works as intended, and you don't have to use the for tag for the label, nor use id for the input checkbox.

Here is the HTML:

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

The code is versatile enough, so if you need just the checkbox, without label, you just leave the span empty - you have to keep the tag though - or alternatively you can create your own custom class to apply the pseudo-elements on the label itself.

Here is the 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; } 

And here is a working fiddle: https://jsfiddle.net/ee1uhb3g/

Verified tested on all browsers - FF, Chrome, Safari, IE, etc

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati