html - 复选框属性设置为可见性 :hidden acts like display:none

标签 html css checkbox

<分区>

当我设置复选框属性"visibility: hidden"时,它的行为类似于"display: none"。这意味着它不可见且不可访问。例如,在下面的代码中,我将我的复选框覆盖在文本上,创建的效果是当单击文本时应选中该复选框。设置 "opacity:0" 将为我创建效果。我只想解释为什么 "visible:hidden" 有点删除复选框。

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

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>

最佳答案

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

关于html - 复选框属性设置为可见性 :hidden acts like display:none,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48331181/

上一篇:javascript - 如何选择相关元素jquery的prev no

下一篇:javascript - SVG 缩放 - 窗口高度或宽度的百分比

相关文章:

javascript - 将子菜单固定到导航顶部

javascript - CSS3 旋转延迟

css - 使用 css 更改输入字段内的字体大小

javascript - 不显眼的 JS : toggle element visibility with checkbox in a form

html - Jekyll - 为 post.url 使用相对 URL

ruby-on-rails - `button_tag` 而不是 `submit_tag`

php - PHPWord 的 HTML 阅读器不能处理表格?

html - 当 child 旋转时更改父 div 大小

android - 在 Android 上部分选中复选框?

html - 使复选框在一行中居中