Question

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

以下是剧本：

<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中是微不足道的。要为表单发送数据，您可以使用隐藏的复选框或hidden输入并设置其值。

网站按钮不适用于iphone / ipads

1 个答案: