Make input invisible through css?

What about setting the invisible input field to position: absolute; which should take it out of the rendering flow.

However, setting it to display: none should in theory do the same...

why don't you use input type="hidden" ?

<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.

This does hide the field, but it still makes it take up space.

This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).