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 - 您选择的元素相关联。

通过将控制元素放在元素中或使用<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>

此外，您可以摆弄display: block的{{1}}。但是，通过给它<label>，float: left或其他什么来获得所需的元素，这应该是非常简单的。

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

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

2 个答案: