Checkbox styling doesn't work on Safari mobile

Question

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?

Answer 1

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