0

When i set the checkbox property "visibility: hidden" it acts like "display: none". Meaning it's is not visible and not accessible. For example in the code below i overlayed my checkbox over the text creating the effect that when the text is clicked the checkbox should be checked. Setting the "opacity:0" will create the effect for me. I just want an explanation why "visible:hidden" kinda removes the checkbox.

To test this you can remove the visibility property to show the checkbox

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>
blecaf
  • 1,625
  • 1
  • 8
  • 13
  • I am really not sure what you question is... anyway: `visibility:hidden` and `display:none` may look the same in your example because your checkbox has `position:absolute` (normally, `display:none` kinda removes the element from the page, while `visibility:hidden` makes it transparent but it still occupies some space on the page) - hope this helps :) – giorgiga Jan 18 '18 at 22:29
  • @giorgiga that's my point i used "visibility:hidden" but it dosn't make it transparent. it makes it look as if it's not there. If it was transparent when you click on the text it's meant to check the checkbox. but when i used the developer tools to change the property"visibilty:visible" the checkbox is not checked. but using opacity works – blecaf Jan 18 '18 at 23:43
  • now I get your point - sorry for being slow :) I guess `visiblity:hidden` does not render the element at all, while `opacity:0` renders it with 100% transparent color. Visually this is the same, but for all the browser knows `opacity:0` is just the same as `opacity:.5` or `opactity:1` and so side effects (eg: mouse pointer, clicks) still apply. It does looks hackish (to me) to rely on this, but I guess it will actually work everywhere forever (in code opacity is probably passed down straight to rendering, while visibility is handled well before that - at least I would have coded it so) – giorgiga Jan 18 '18 at 23:56

1 Answers1

0

hi this link will show you the differences between them it has good examples CSS : Visibility, Opacity and Display

Alexander
  • 161
  • 8