Pure-CSS精美复选框问题

Question

我正在尝试提出一个纯CSS的精美复选框。而且我已经成功实现了90％的目标，唯一的例外是，我看到了刺激性的标准车将盒子从我的精美复选框下出现。而且我无法摆脱它。有帮助吗？

.checkboxFive {
  width: 12px;
  margin: 12px 100px;
  position: relative;
}
.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}
.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  top: 1px;
  left: 3px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.checkboxFive label:hover::after {
  opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
</div>

Answer 1

您可以使用position和坐标将其从屏幕上删除。

（display或visibility可能成为可访问性问题）

.checkboxFive {
  width: 12px;
  margin: 12px 100px;
  position: relative;
}
.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}
.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  top: 1px;
  left: 3px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.checkboxFive label:hover::after {
  opacity: 0.5;
}
#checkboxFiveInput {
position:absolute;
left:-9999px;
}
.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
</div>

Answer 2

添加display:none到CheckboxFiveInput。

.checkboxFive {
  width: 12px;
  margin: 12px 100px;
  position: relative;
}
.checkboxFive input {
   display:none;
 }
.checkboxFive label {
  cursor: pointer;
  position: absolute;
  width: 12px;
  height: 12px;
  top: 0;
  left: 0;
  background: #eee;
  border: 1px solid #ddd;
}
.checkboxFive label:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 11px;
  height: 4px;
  background: transparent;
  top: 1px;
  left: 3px;
  border: 2px solid #333;
  border-top: none;
  border-right: none;
  transform: rotate(-45deg);
}
.checkboxFive label:hover::after {
  opacity: 0.5;
}
.checkboxFive input[type=checkbox]:checked + label:after {
  opacity: 1;
}

<div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
</div>

Answer 3

创建自定义复选框的第一步是将visibility: hidden添加到您的input元素。就您而言，您的CSS看起来像这样：

.checkboxFive #checkboxFiveInput {
    visibility: hidden;
}

您可以看到此链接以获取有关构建自定义复选框的更多信息。