html - 网站按钮不适用于 iphone/ipad

Question

您好，我有一个客户的网站，该网站在计算机浏览器上运行良好，但在 Apple 产品中查看时出现问题。网址是http://holmesdesign.stage.centuryware.org ，如果您向下滚动到页面底部，则会有一个带有复选框的表单。用户应该至少点击一个复选框来填写表格，但是使用苹果产品是不可点击的。有人可以建议实际出了什么问题吗？谢谢!

脚本如下:

<input type="checkbox" value="Buy" onclick="javascript:checkBoxValidate(0)" id="checkbox0" name="checkbox" class="chkclass">


.chkclass {
  background-image: url("images/check-on.png") !important;
  background-position: 0 0;
  background-repeat: no-repeat;
  height: 43px;
  width: 43px;
}

Answer 1

你的 CSS 中有这个:

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

如果复选框不可见，则您无法单击它。看起来有些浏览器会捕获标签的点击并在复选框上执行点击，而其他浏览器则不会。

对于样式，您可以将复选框覆盖在标签的顶部:

<div style="
    position: relative;
">
    <input type="checkbox" name="checkbox" id="checkbox1" onclick="checkBoxValidate(1)" value="Rent" class="" style="
    position: absolute;
">
    <label for="checkbox1" id="labelchk1" class="" style="
    position: absolute;
">Click-Me</label></div>

并将其添加到复选框样式中:

width: 43px;
height: 43px;
display: block;
opacity: 0;

就个人而言，如果我想改变它的外观，我会用 DIV 制作我自己的复选框。您只需单击一下即可将值切换为 0 和 1，并将 CSS 类更改为已选中或未选中。这在 jQuery 中是微不足道的。为了通过表单发送数据，您可以使用隐藏复选框或隐藏输入并设置其值。