Checkbox utility not working on Safari mobile

Question

I want to set the checkboxes as follows:

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 works great on desktops and Chrome on mobile phones.

But the problem is in Safari on the iPhone. It shows the following:

How can i fix this? Is there a reserve or something?

Answer 1

As mentioned above, pseudo-elements do not work very well with inputs, however it would be nice to wrap the checkbox inside the label - it really is w3c, so it works as intended, and you don’t need to use the for tag for label, and also use the checkbox id for input.

Here is the HTML:

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

The code is quite universal, so if you only need a flag, without a label, you just leave the pool empty - you need to save the tag, although, or, alternatively, you can create your own custom class for applying 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 the working fiddle: https://jsfiddle.net/ee1uhb3g/

Testing is tested in all browsers - FF, Chrome, Safari, IE, etc.

Answer 2

The :after or :before pseudo-element does not work properly with an input type element. Thus, adding a pseudo-element like them is incorrect. To add a label next to the checkbox and add a style for this.

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

Answer 3

The same question I came across once. I suggest that you use validation images and uncheck your design. When the user is verified, the src image should change to the marked image. You can use the javascript function for this. Make sure you use the same image size. So the user cannot feel that these are two different images. For your reference, I attach the images that I used.

Check image

Uncheck

Here is my code. Some where I found for you. view it. gave these images in my stylesheet and rendered them in my javascript. When the user clicks on the marked image, I delete the “selected” class. Thus, this snapshot will be shown to the 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");}