如何使整個自定義復選框/Div 可點擊——不僅僅是標簽 + 輸入

Question

我有像按鈕一樣樣式的自定義復選框。 當您單擊標簽或輸入它周圍的 div 時，它會改變顏色。 但是，只有標簽和輸入是可點擊的。

有沒有辦法讓整個 div/button 可點擊（即邊框內的所有內容）？

這是我的代碼：

 div.label { border:solid 1px gray; line-height:40px; height:40px; width: 250px; border-radius:40px; -webkit-font-smoothing: antialiased; margin-top:10px; font-family:Arial,Helvetica,sans-serif; color:gray; text-align:center; } label { display:inline; text-align:center; } input[type=checkbox] { display: none; } input:checked + div { border: solid 1px red; color: #F00; } input:checked + div:before { content: "\\2713"; }

 <input id="lists[Travel]" type="checkbox" name="lists[Travel]" /> <div class="label"> <label for="lists[Travel]">Travel</label> <br> </div>

Answer 1

答案很簡單：您不需要額外的div元素。 實際上，您可以將label -element 放置在您想要的任何位置，並將其與您選擇的input -element 相關聯。

• <label>可以通過將控件元素放置在元素內或使用for屬性與控件相關聯。 這樣的控件稱為標簽元素的標記控件。 一個輸入可以與多個標簽相關聯。
• 標簽本身並不直接與表單相關聯。 它們僅通過與之關聯的控件與表單間接關聯。
• 當單擊或點擊<label>並且它與表單控件關聯時，也會為關聯的控件引發生成的click事件。

來源：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

 label { display:block; border:solid 1px gray; line-height:40px; height:40px; width: 250px; border-radius:40px; -webkit-font-smoothing: antialiased; margin-top:10px; font-family:Arial,Helvetica,sans-serif; color:gray; text-align:center; } input[type=checkbox] { display: none; } input:checked + label { border: solid 1px red; color: #F00; } input:checked + label:before { content: "\\2713 "; } /* new stuff */ .check { visibility: hidden; } input:checked + label .check { visibility: visible; } input.checkbox:checked + label:before { content: ""; }

 <input id="lists[Travel]" type="checkbox" name="lists[Travel]" /> <label for="lists[Travel]">Travel with jump</label> <!-- alternatively avoid jumps between text of state checked and unchecked --> <input class="checkbox" id="lists[new]" type="checkbox" name="lists[new]" /> <label for="lists[new]"><span class="check">✓</span> Travel without jump</label>

此外，您可以擺弄<label>的display: block 。 但這應該很簡單，通過給它float: left 、 display: inline-block或任何讓所需元素浮動的東西。

代碼筆

Answer 2

這是實現這一目標的一種方法：

<div onclick="this.querySelector('input[type=checkbox]').click()">
  <input type="checkbox" style="pointer-events:none">
  <span>Label</span>
</div>

或者如果你給復選框一個id ：

<div onclick="abc.click()">
  <input id="abc" type="checkbox" style="pointer-events:none">
  <span>Label</span>
</div>

您需要pointer-events:none在此方法中，否則當您直接單擊復選框時會發生雙擊（導致選中和取消選中）。