纯 CSS 复选框在 iOS 上的显示方式不同答案

【问题标题】：Pure CSS checkbox appearing differently on iOS纯 CSS 复选框在 iOS 上的显示方式不同
【发布时间】：2018-08-10 04:52:47
【问题描述】：

我正在尝试使用纯 CSS 设置我自己的复选框的样式这一臭名昭著的任务。我实际上并不反对使用 Javascript/jQuery 来获得相同的效果，但到目前为止我还没有发现它有用。在浏览器中一切正常，我有一个三角形（播放）表示未选中的值，还有一个暂停符号表示选中。然而，在手机上它看起来完全不同，实际上是不可点击的。我真的不明白为什么它看起来如此完全不同？任何提示都会非常有用。

input[type=checkbox] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 12px;
  border-color: transparent transparent transparent #ffffff;
  outline: none;
  display: none;
  animation: pointer 0.4s infinite;
  cursor: none;
  transition: opacity 0.4s;
}

input[type=checkbox]:checked {
  width: 10px;
  height: 11px;
  border-left: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  border-top: none;
  border-bottom: none;
}

【问题讨论】：

每个浏览器都以不同的方式呈现 HTML 输入/控件。某些浏览器不允许您调整其他浏览器允许的 CSS。我总是创建我自己的“复选框”覆盖来切换隐藏的复选框。此方法允许您在所有浏览器中完全控制您的设计。
@Illdapt – 你能指出我的帖子或网站的方向吗？我已经尝试过覆盖，但我发现它与底层的复选框功能混淆了。
虽然我不是 W3Schools 的忠实粉丝，但这里有一个简单的例子：w3schools.com/howto/howto_css_custom_checkbox.asp

标签： html css dom mobile sass

【解决方案1】：

由于浏览器实现了自己的输入样式，创建自己的复选框输入的最一致的方法是使用 CSS 隐藏复选框输入，并使用 HTML 标签标记作为复选框。您可以随意设置<label> 的样式，这将是跨浏览器最一致的。

使用HTML tag：

<input type="checkbox" id="checkbox_1" style="display:none;" />
<label for="checkbox_1" class="custom_checkbox"></label>

你可以在CodePen.io找到一些巧妙的例子

【讨论】：