jquery - 自定义单选按钮 - 在 iPad 上的 Safari 中显示隐藏的默认按钮

Question

我在这些按钮上设置了 -moz-appearance: none, -webkit-appearance: none，但出于某种原因，我仍然不断收到错误消息，默认单选按钮选择器显示在它们应该隐藏的位置。这是在 Safari 上的 iPad Air(大约一两年前)上发生的。

JSFiddle 在这里:https://jsfiddle.net/p8sdu1ut/7/

我拍了一张屏幕截图，你可以在这个链接上查看:

.radio-selector {
  position: absolute;
}

.radio-selector input {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.largeRadio {
  background-image: url(http://theloneprospector.com/largeUnchecked.png);
}

.radio-selector input:active+.radio-label {
  opacity: .9;
}

.radio-selector input:checked+.radio-label {
  -webkit-filter: none;
  -moz-filter: none;
  filter: none;
  background-image: url(http://theloneprospector.com/largeChecked.png);
}

.radio-label {
  cursor: pointer;
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
  width: 100px;
  height: 70px;
  -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
  transition: all 100ms ease-in;
}

.radio-label:hover {
  -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
  -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
  filter: brightness(1.2) grayscale(.5) opacity(.9);
}

<div class="radio-selector">
  <div class="Q1YES">
    <input type="radio" id="Q1YES" name="currentUser" value="1">
    <label class="radio-label largeRadio" for="Q1YES" onclick=""></label>
  </div>
  <div class="Q1NO">
    <input type="radio" id="Q1NO" name="currentUser" value="0">
    <label class="radio-label largeRadio" for="Q1NO" onclick=""></label>
  </div>
</div>

Answer 1

要在 Safari 上隐藏输入(单选框、复选框)，您可以使用以下样式:

input[type="radio"],
input[type="checkbox"] {
  appearance: none;
  display: none
}