如何使整个自定义复选框/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在此方法中，否则当您直接单击复选框时会发生双击（导致选中和取消选中）。