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

【问题标题】：Customized radio buttons - hidden default buttons showing up on Safari on iPad自定义单选按钮 - 在 iPad 上的 Safari 上显示的隐藏默认按钮
【发布时间】：2017-08-26 00:49:04
【问题描述】：

我在这些按钮上设置了 -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>

【问题讨论】：

我没有 ipad 来检查自己，但你能把他们的位置设置为屏幕外吗？ position:absolute; left: -999;

标签： jquery ios css ipad safari

【解决方案1】：

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

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

这就像一个魅力。

【讨论】：

为我工作.. 谢谢！

【解决方案2】：

要在 Safari 上隐藏输入（单选框、复选框），您可以使用以下样式：

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

【讨论】：