自定义单选按钮 - 隐藏在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
}

Answer 2

我在iOS上遇到了与Safari相同的问题。 这是一个简单的解决方案：

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

这就像一个魅力。