title: Checkbox styling doesn't work on Safari mobile
body: <p>I want to style the checkboxes like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/zFRPM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zFRPM.png" alt="enter image description here"></a></p>
  
  <p>This is my <strong>CSS</strong>:</p>
  
  <pre><code>.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";
  }
  </code></pre>
  
  <p>This shows perfect on desktop and Chrome on mobile phones. </p>
  
  <p><a href="https://i.stack.imgur.com/cE0oO.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cE0oO.png" alt="enter image description here"></a></p>
  
  <p>But the problem is with Safari on iPhone. It shows like this:</p>
  
  <p><a href="https://i.stack.imgur.com/QyS6w.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/QyS6w.jpg" alt="enter image description here"></a></p>
  
  <p>How can I fix this? Is there a fallback or something?</p>