html - 复选框格式和功能

Question

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. 开启和关闭只能通过点击图形来实现，而不是图形和文本。

Answer 1

您可以将复选框元素包装在包装器元素中，并使用相对和绝对定位。这使得控制宽度和垂直对齐以及悬停状态以及您可以单击标签文本以选中复选框这一事实变得容易。

这是一个例子。这实际上是 Bootstrap 所做的。

.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>