CODEWITHSUNDEEP
cssioscheckbox
Nrc
Nrc

Reputation: 9787

Checkbox appearance in iOS

iOS devices change the css of regular forms. To avoid that I could find that I can use that css:

input, textarea, submit { -webkit-appearance: none; }

But then the checkbox disappears in iOS and regular computers.

I then tried to add an exception only for the checkbox

#checkbox1 { -webkit-appearance: checkbox; }

Then the form is ok. The checkbox appears, but in iOS the checkbox has a strange aspect and it is not perfectly centered.

How can I control the css of the checkbox in iOS and give it a simple regular aspect?

Here to test: https://jsfiddle.net/19g2vu4k/

HTML:

<div id="checkAndText">
    <input type="checkbox" id='checkbox1' name="rebre" checked="checked">
    <div id="checkText">Text of the checkbox</div>
</div>

Upvotes: 3

Views: 10813

Answers (2)

Vacit A.
Vacit A.

Reputation: 59

this snippet worked for me

   input[type="checkbox"],
   input[type="radio"] {
    width: 0;
    appearance: none;
    border:none;
    }

Upvotes: -1

Bryce Howitson
Bryce Howitson

Reputation: 7690

If you want the checkbox to look the same everywhere why not use -webkit-appearance: none and the style your own?

Just add styling to input[type='checkbox'] and input[type='checkbox']:checked to make it look the way you want.

Here's an example

body {
  padding: 20px;
}
body > input {
  margin-right: 10px;
}

input[type='checkbox'] {
  /* remove browser chrome */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  outline: none;
  /*add styling */
  position: relative;
  width: 2rem;
  height: 2rem;
  border: 2px solid #455A64;
  overflow: hidden;
  border-radius: 3px;
  box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
input[type='checkbox']::before {
  content: '';
  color: #fff;
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background-color: transparent;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 2px;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.25s ease-in-out;
  transition: -webkit-transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out;
  transition: transform 0.25s ease-in-out, -webkit-transform 0.25s ease-in-out;
  /* base64 encoded to make things easier to show 
  	normally you would use an image or a font
  */
  background-image: url("data:image/svg+xml;base64,PCEtLSBHZW5lcmF0ZWQgYnkgSWNvTW9vbi5pbyAtLT4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjQ0OCIgaGVpZ2h0PSI0NDgiIHZpZXdCb3g9IjAgMCA0NDggNDQ4Ij4KPHRpdGxlPjwvdGl0bGU+CjxnIGlkPSJpY29tb29uLWlnbm9yZSI+CjwvZz4KPHBhdGggZD0iTTQxNy43NSAxNDEuNWMwIDYuMjUtMi41IDEyLjUtNyAxN2wtMjE1IDIxNWMtNC41IDQuNS0xMC43NSA3LTE3IDdzLTEyLjUtMi41LTE3LTdsLTEyNC41LTEyNC41Yy00LjUtNC41LTctMTAuNzUtNy0xN3MyLjUtMTIuNSA3LTE3bDM0LTM0YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsNzMuNSA3My43NSAxNjQtMTY0LjI1YzQuNS00LjUgMTAuNzUtNyAxNy03czEyLjUgMi41IDE3IDdsMzQgMzRjNC41IDQuNSA3IDEwLjc1IDcgMTd6Ij48L3BhdGg+Cjwvc3ZnPgo=");
}

input[type='checkbox']:checked::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}
<input type="checkbox" />
<input type="checkbox" checked="checked" />

Upvotes: 5

Related Questions