如何使整个自定义复选框/ Div可点击 - 不仅仅是标签+输入

Question

我有自定义复选框,我的样式像按钮.单击标签或输入div时,它会改变颜色.但是,只有标签和输入是可点击的.

有没有办法让整个div /按钮可以点击(即边框内的所有内容)？

这是我的代码:

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在任何地方放置元素,并将其与input您选择的元素相关联.

• A <label>可以通过将控制元素放在元素内部或使用for属性与控件相关联.这种控制称为标签元素的标记控制.一个输入可以与多个标签相关联.
• 标签本身并不与表格直接相关.它们只通过与它们相关联的控件间接地与表单相关联.
• <label>单击或点击a 并将其与表单控件关联时,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>

此外,你可以摆弄它display: block的<label>.但这应该是非常简单的给予它float: left,display: inline-block或任何让所需元素浮动的东西.

CODEPEN

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这种方法，否则当您直接单击复选框时会发生双击（导致选中和取消选中）。