Question

我发现这个非常好用于制作滑块/开关的代码......

它仅使用CSS使复选框显示为开关。我得到的大部分都没有任何javascript。我只是想知道复选框是如何设置更改其：隐藏时检查属性？鉴于css设置输入设置为display：none ??

Answer 1

#check1{
  display: none;
}

label[for="check1"]{
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: lightgray;
  cursor: pointer;
}

#check1:checked + label[for="check1"]{
  background-color: red;
}

<input type="checkbox" id="check1" />
<label for="check1"></label>

使用标签。

使用：选中选择器。

Answer 2

引用输入的标签将其许多事件传播到主机输入元素。例如，在以下两种情况下仍会切换复选框：

标签通过作为父

来引用子输入

＆＃13;

<label>
    <span>Click me too!</span>
    <input type="checkbox" />
</label>

＆＃13;

通过id输入的标签引用：

＆＃13;

<label for="my-checkbox"><span>Or click me!</span><label>
<input id="my-checkbox" type="checkbox" />

＆＃13;

对于您的切换，正如您所说，复选框本身隐藏了display: none。他们没有像上面的例子那样显示文字，而是插入HTML来渲染一个开关。

当元素显示时：none仍然可以点击

2 个答案: