当一个元素有 display:none 时它仍然是可点击的答案

【问题标题】：When an element has display:none is it still clickable当一个元素有 display:none 时它仍然是可点击的
【发布时间】：2018-01-24 02:19:42
【问题描述】：

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

How to make a switch with CSS

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

【问题讨论】：

提供您的代码
不，它不可点击

标签： html css

【解决方案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>

使用标签标签。

并使用 :checked Selector 。

【讨论】：

感谢您的帖子，但问题在标题中，@fond4218 已回答

【解决方案2】：

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

标签作为父级引用子输入

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

按 id 输入的标签引用：

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

在您的开关的情况下，复选框本身被 display: none 隐藏，如您所说。他们没有像上面的例子那样显示文本，而是插入了 HTML 来呈现一个开关。

【讨论】：