Флажок появления в iOS

Question

iOS устройства меняют css обычных форм. Чтобы избежать этого, я смог найти, что могу использовать это css:

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

Но тогда флажок исчезает в iOS и обычных компьютерах.

Затем я попытался добавить исключение только для флажка

#checkbox1 { -webkit-appearance: checkbox; }

Тогда форма в порядке. Этот флажок появляется, но в iOS флажок имеет странный аспект и не идеально отцентрирован.

Как я могу контролировать css флажка в iOS и дать ему простой регулярный аспект?

Здесь для проверки: 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>

Answer 1

Если вы хотите, чтобы флажок выглядел везде одинаково, почему бы не использовать -webkit-appearance: none и свой стиль?

Просто добавьте стили к input[type='checkbox'] и input[type='checkbox']:checked, чтобы они выглядели так, как вы хотите.

Вот пример

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" />