Question

We’re trying to create a page with custom checkboxes by hiding the actual checkbox input element and changing the label’s styles with input:checked+label CSS selectors. This works fine, but on IE7 the hidden checkbox still takes up space from the document flow, messing up the layout.

Here’s an extremely simplified demonstration of the problem:

<style type="text/css">
div.hello { position: absolute; left: 200px; }
</style>

<ul>
    <li><div class="hello">Hello</div><div>First</div></li>
    <li><div class="hello">Hello</div><div>Second</div></li>
    <li><div class="hello">Hello</div><div>Third</div></li>
</ul>

It seems that any block elements that are taken out of the document flow with position:absolute still take up vertical space on IE7.

Here’s what it looks like on newer browsers:

First         Hello
Second        Hello
Third         Hello

On IE7 it looks like this:

              Hello
First
              Hello
Second
              Hello
Third

For an example that is closer to our actual scenario, see this fiddle. Are we missing something? How can we hide the checkbox element so that it still works and takes up no space in the layout?

Answer 1

You can style the inputs with this css to hide inputs in ie. (as @Abody97 said)

input { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
    opacity: 0; 
    width: 0px; 
    height: 0px; 
} 

But in order to remove spaces that created by inputs. Remove the spaces between input tags. Like <input /><input /> not <input /> <input />