Alex Rivera | Logout

Make input invisible through css?

Asked 2009-07-03T08:56:23.887
18

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

html css hide
Edit
Report

2 Answers

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

answered 2009-07-03T09:04:45.320
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).

answered 2009-07-03T09:08:27.230

Your Answer