4

This is the checkbox hack: https://css-tricks.com/the-checkbox-hack/

My question is why "hide" the checkbox by positioning it off the page, as shown in the example on CSS Tricks:

position: absolute;
top: -9999px;
left: -9999px;

Why not just do:

display: none;

The answer at How does css checkbox hack work? says:

"Hiding the checkbox through display:none could cause buggy behavior on certain browsers. Just hiding it from view by a position: absolute is safer."

Which browsers? And are there any drawbacks with using absolute position to place an element off the page? To be more specific, are there any drawbacks with using absolute position to place an input off the page?

TylerH
  • 20,799
  • 66
  • 75
  • 101
user2991837
  • 626
  • 1
  • 8
  • 17
  • 1
    Similar to: https://stackoverflow.com/questions/28191386/why-hiding-elements-using-position-absolute-and-left-30000px but not an exact duplicate? – Roko C. Buljan Oct 28 '18 at 12:24
  • 1
    display:none remove the element so probably the browser will no more consider it – Temani Afif Oct 28 '18 at 12:25
  • 3
    it's a screen readers issue, [refer to this](https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/) – Rainbow Oct 28 '18 at 12:58
  • @ZohirSalak and what a screen reader will read on a checkbox? – Temani Afif Oct 28 '18 at 13:05
  • The checkbox hack is delibereatly hiding the checkbox. The label needs to be clickable, not the checkbox. Screen readers don't need to 'see' the checkbox. – user2991837 Oct 28 '18 at 15:37
  • 2
    Heh, I have no idea what prompted me to mention the buggy behavior in my original answer. I don't remember what bugs or which browsers I meant. Chances are I still supported IE7 or something ridiculous like that back then. – Stephan Muller Oct 28 '18 at 21:38
  • 3
    and to answer your question, there is no drawback to use position:absolute to hide the input since it's the intended behavior at the end – Temani Afif Oct 28 '18 at 21:41
  • @Stephan Muller and Temani Afif thank you. That does answer my question – user2991837 Oct 29 '18 at 08:53
  • @TemaniAfif Please don't answer in the comments. Post an answer, instead – TylerH Oct 30 '18 at 14:29
  • @TylerH it's not a *complete* answer as I didn't answer the other question and I don't have any official proof to say that it's fine to hide using position:absolute ... for me there is no drawback but probably someone will say the opposite. – Temani Afif Oct 30 '18 at 14:33

1 Answers1

1

There is no drawback to using absolute positioning. It just depends on what kind of space you are expecting that element to occupy. Absolute positioning is a good answer because it means the element is not effecting the layout of the page and the element remains in the DOM. "Visibility: hidden" or "opacity: 0" will also suffice. However, they will still take up space on the page. This is fine in the event that you are just going to absolutely position something over the top anyway. Display none prevents the element from reaching the DOM and thus the functionality will not be available.

Kevin Grant
  • 138
  • 9