自定義可點擊（'複選框'）圖標

我正在嘗試創建一個像''圖像這樣的移動'iPhone圖標，表現得像一個複選框。我希望能夠在移動設備上有可點擊的圖標（因此在這種情況下點擊事件不起作用）。我正在使用jquery mobile作爲我的平臺，但希望在沒有其樣式的情況下創建這些圖標。我在這裏的代碼（關閉計算器）適用於計算機瀏覽器，但不適用於移動「觸摸」設備。我瞭解如何使用所有CSS工具，並在觸發打開或關閉檢查時使圖像看起來不同。問題是，我不知道要使用哪種類型的事件才能使用移動設備進行觸摸。有人有他們可以提供的例子或建議嗎？自定義可點擊（'複選框'）圖標

謝謝

<style> 
input[type=checkbox] { 
     display:none; 
} 

input[type=checkbox] + label 
{ 
    background-image: url('pictures/wheelChair.png'); 
    height: 130px; 
    width: 130px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
} 

input[type=checkbox]:checked + label 
    { 
    background-image: url('pictures/wheelChair2.png'); 
    height: 130px; 
    width: 130px; 
    display:inline-block; 
    padding: 0 0 0 0px; 
    } 

     </style> 

</head> 
<body> 

<p> 
<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing"> </label>

來源

2011-08-09 Joshua Tolman

谷歌說，你想「龍頭」，但我不知道。 – mikeY

你還不能使用點擊事件嗎？我之前在移動設備上使用過標準的jQuery（不是移動版本），所以我相信 – Jamie

所以對人沒有繼續刪除分等級，我已經做出了新的解決方案，更清晰的忍者CSS。檢查例子HERE

input[type="checkbox"]{ 
    display:none; 
} 
input[type="checkbox"]+label{ 
    cursor:pointer; 
    text-indent:22px; 
    display:block; 
    height:22px; 
    position:relative; 
} 
input[type="checkbox"] + label:after{ 
    background: url('http://www.dailycoding.com/Uploads/2008/12/CheckBox.png') no-repeat -21px 0px; 
    display:block; 
    width:21px; 
    content:""; 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:21px; 
} 
input[type="checkbox"]:checked+label:after{ 
    background-position:0px 0px; 
}

FOR

<input type='checkbox' name='thing' value='valuable' id="thing"/><label for="thing">Something</label> 

<input type='checkbox' name='thing1' value='valuable' id="thing1"/><label for="thing1"></label>

來源

2011-08-09 21:28:04 iLevi

那麼，您怎麼看待這個問題？ – iLevi

自定義可點擊（'複選框'）圖標

回答

相關問題