CODEWITHSUNDEEP
htmlcssdommobilesass
Jack Clarke
Jack Clarke

Reputation: 519

Pure CSS checkbox appearing differently on iOS

I am trying to perform the notorious task of styling my own checkbox with pure CSS. I'm not actually against using Javascript/jQuery to get the same effect, but so far I have not found it useful. It's all working fine in the browser, I have a triangle (play) for the unchecked value, and a pause symbol for the checked. However, on phone it appears completely differently and is actually unclickable. I don't really understand why it's appearing so radically differently? Any tips would be really useful.

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent #ffffff;
  outline: none;
  display: none;
  animation: pointer 0.4s infinite;
  cursor: none;
  transition: opacity 0.4s;
}

input[type=checkbox]:checked {
  width: 10px;
  height: 11px;
  border-left: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  border-top: none;
  border-bottom: none;
}

enter image description here enter image description here

Upvotes: 1

Views: 1505

Answers (1)

TJBlackman
TJBlackman

Reputation: 2313

Since browsers implement their own input stylings, the most consistent way to create your own checkbox inputs would be to hide the checkbox input with CSS, and use an HTML label tag as the checkbox instead. You can style the <label> any way you want and it will be the most consistent across browsers.

Using an HTML tag:

<input type="checkbox" id="checkbox_1" style="display:none;" />
<label for="checkbox_1" class="custom_checkbox"></label>

You can find some slick example on CodePen.io

Upvotes: 3

Related Questions