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>

10-05 20:39
查看更多