复选框属性设置为可见性：隐藏的行为如display：none

Question

当我设置复选框属性“visibility：hidden”时，它就像“display：none”。意味着它不可见且无法访问。例如，在下面的代码中，我将复选框覆盖在文本上，创建了一个效果，即单击文本时应选中复选框。设置“不透明度：0”将为我创建效果。我只想解释为什么“visible：hidden”有点删除复选框。

要对此进行测试，您可以删除visibility属性以显示复选框

div {
  position: relative;
  width: 200px;
  border: 1px solid red;
}
input {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    visibility: hidden;
    height: 100%;
    cursor: pointer;
    /**opacity: 0;**//**I can use this instead tho**/
}

<div>
  <input id="units" type="checkbox" value="13"><span class="btn">TEST</span>
</div>

Answer 1

这个链接会告诉你它们之间的区别它有很好的例子 CSS : Visibility, Opacity and Display