HTML:
<input type="checkbox" id="checkentire"> PLAY ENTIRE LESSON
<br>
<input type="checkbox" id="checkloop"> LOOP
CSS:
input[type=checkbox] {
width:45px;
margin:5px 0;
cursor:pointer;
vertical-align:middle;
}
input[type=checkbox]:hover {
background:lightgreen;
}
问题:
1.
input[type=checkbox]:hover
-根本不起作用。2.
cursor:pointer
-仅适用于图形符号,不适用于文本。3.
width:45px
-增加图形页边距,而不是图形本身。4.
vertical-align:middle
-图形和文本未对齐。5.打开和关闭只能通过单击图形,而不能单击图形和文本。
最佳答案
您可以将checkbox元素包装在wrapper元素内,并进行相对和绝对定位。这样可以轻松控制宽度和垂直对齐方式以及悬停状态,并且可以单击标签文本以选中复选框。
这是一个例子。这实际上是引导程序执行的操作。
.checkbox-wrapper {
position: relative;
display: inline-block;
width: auto;
margin-top: 10px;
margin-bottom: 10px;
background:tomato;
padding: 0 20px;
}
.checkbox-wrapper label {
display: inline-block;
max-width: 100%;
min-height: 40px;
line-height: 40px;
vertical-align: middle;
padding-left: 20px;
cursor: pointer;
}
.checkbox-wrapper input[type=checkbox] {
position: absolute;
margin: 0 0 0 -20px;
top: 50%;
transform: translate(0,-50%);
}
.checkbox-wrapper:hover {
background:lightgreen;
}
<div class="checkbox-wrapper">
<label for="checkentire">
<input type="checkbox" id="checkentire">
PLAY ENTIRE LESSON
</label>
</div>