CSS樣式複選框，當選中 - 不工作

我有以下靜態html文件，我花了時間爲我們的客戶端建立一個CMS Web應用程序站點。CSS樣式複選框，當選中 - 不工作

http://cms.tmadev.com.au/usergroup.html

在中間部分，有一個複選框垂直陣列（這是我的CSS風格吧），我跟很多在線教程，這導致我使用本網站的鏈接。

http://csscheckbox.com/

我下載的源代碼教程，理解是，複製的CSS代碼，裁縫我的變化按我的客戶要求。

一切看起來都非常好 - 除非試圖檢查複選框。

什麼都沒發生！

單擊時不會檢查複選框！

我不明白爲什麼它不工作，因爲它應該像教程。

有人可以告訴我我做錯了什麼嗎？

這是我的代碼。

input[type=checkbox].input-checkbox{ 
    width: 1px; 
    height: 1px; 
    position: absolute; 
    overflow: hidden; 
    clip: rect(0,0,0,0); 
    margin: -1px; 
    padding: 0; 
    border: 0; 
} 


input[type=checkbox].input-checkbox + label.input-label{ 
    border: 2px solid #58585A; 
    display: inline-block; 
    width: 20px; 
    height: 20px; 
    line-height: 15px; 
    background-repeat: no-repeat; 
    font-size:15px; 
    vertical-align: middle; 
    cursor: pointer; 
} 

input[type=checkbox].input-checkbox:checked + label.input-label{ 
    background-position: 0 -20px; 
} 

.input-label{ 
    background-image: url('/images/tickbox.png'); 
}

非常感謝！

來源

2014-01-22 awongCM

CSS很好。您的問題與label元素和input元素相匹配。

該方法依賴於單擊label來切換複選框的事實。如果label未連接到複選框，則不起作用。將每個label的for屬性的值與每個複選框的id匹配。

例如：

<input type="checkbox" class="input-checkbox" id="checkbox1"> 
<label for="checkbox1" class="input-label"></label>

LIVE EXAMPLE HERE

來源

2014-01-22 00:21:51

哇，這是快速反應！我只是修好了 - 哈！這就解釋了爲什麼我應該讓這個標籤元素和輸入元素相匹配。我忽略了那部分，從來沒有意識到這是我應該首先使用的。謝謝大家！ :) – awongCM

我有這個問題，但這不是原因，我有一種感覺，這是因爲我使用句柄來生成包含複選框的模板客戶端。這隻發生在較小的屏幕尺寸上，在較大的尺寸下，它不使用客戶端模板時效果很好。將不勝感激任何見識... – RyanJohnstone

在你的HTML元素label在他們for屬性值不正確。
每個label必須具有for屬性值，該屬性值完全匹配它打算激活的複選框的id。

來源

2014-01-22 00:22:27

標籤上的for屬性需要與您輸入的id匹配。這是爲我工作：

<div class="inputfield">       
<input type="checkbox" class="input-checkbox" id="checkbox1"> 
<label for="checkbox1" class="input-label"></label> 
</div>

來源

2014-01-22 00:23:08

-1

你必須改變你的標籤ID 這裏正在撥弄我有改變你的此行

<label for="checkbox2" class="input-label"></label>

http://jsfiddle.net/jUa3P/146/

來源

2016-06-01 11:50:18

這不工作了。 – zachdyer

CSS樣式複選框，當選中 - 不工作

回答

相關問題