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?

Solution 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

Solution 2

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>

Comments

[CedricSoubrie]

In our case it was line-height: 20px; that fixed the problem

[scooterlord]

@CedricSoubrie glad if the post helped you out