我有自定义复选框，其样式类似于按钮。单击标签或输入标签时，其周围的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>答案很简单：您不需要其他div元素。实际上，您可以在所需的label任何地方放置-element并将其与input您选择的-element相关联。
<label>可以通过将控件元素放置在元素内或使用for属性将A与控件关联。这样的控件称为标签元素的标签控件。一个输入可以与多个标签关联。- 标签本身并不直接与表单关联。它们仅通过与之关联的控件与表单间接关联。
- 当
<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或任何以获得所需的元素浮动。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句