Make input invisible through css?

Question

I have a form where depending on the website's brand one of two input fields should be visible at one given spot.

I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none; This does hide the field, but it still makes it take up space. I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.

Untill now all the branding things could be done with css style sheets so I would like to keep it that way. The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).

Answer 1

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

Answer 2

I'm not too familiar with CSS, but you can try implementing JQuery which combines Javascript and CSS to let you do stuff like that with relative ease.

Answer 3

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).

Answer 4

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...

Answer 5

You can do this if you want to isolate the css code from other input:

input[type="checkbox"] {
    display: none;
}

You can also further isolate it from the same type by indicating another class.

Answer 6

<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.