網站按鈕不適用於iphone/ipads

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中是微不足道的。爲了發送表單中的數據，您可以使用隱藏複選框或輸入hidden並設置其值。