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

Are you using server-side code at all? If so, you can conditionally render one or the other field rather than doing it with styles or script. — Joe Chung
– Joe Chung, Commented Jul 3, 2009 at 9:05
yes, that's what I'm doing now. But as I mentioned, I would like to keep the branding in the css only. Now I have to maintain branding in both the views as the stylesheets. — Boris Callens
– Boris Callens, Commented Jul 3, 2009 at 9:21
Why do you you want to keep the branding changes only in the CSS? CSS is used for styling only - if your branding involves changing the structure of the HTML the appropriate place to handle this is in the HTML. — edeverett
– edeverett, Commented Jul 3, 2009 at 9:25
Because the core functionality is basically the same. The only difference is the priority in search factors. As my partial first shows only a few fields (the most important ones) it would be nice to just hide the others. — Boris Callens
– Boris Callens, Commented Jul 3, 2009 at 14:01

Paul Redmond · Accepted Answer · 2016-10-25 15:34:35Z

18

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

edited Oct 25, 2016 at 15:34

Paul Redmond

3,2964 gold badges35 silver badges53 bronze badges

answered Jul 3, 2009 at 9:01

bdo334

4082 gold badges9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

edeverett Over a year ago

This would be good. Ideally the HTML presented to the user should make sense without the need for CSS.

Boris Callens Over a year ago

This would spread my branding logic over the stylesheet and the views. Now I need to maintain branding logic at two places instead of one.

edeverett Over a year ago

Muddling the separation of concerns in the technologies you are using for quick gains is rarely the path to easily maintainable code.

Boris Callens Over a year ago

And how do you see your sentence connected to my case? Stylesheets are for GUI definition. The branding is pure GUI. The functionality is exactly the same. There is no quick gain involved. The quick gain is having conditional rendering. Now whenever a brand is added I have to make sure my conditional rendering takes the new brand into account as well.

Felipe Alarcon Over a year ago

This will not work if you are implementing clipboard.js so the other answer would be more appropriate in this scenario.

peirix · Accepted Answer · 2009-07-03 09:11:34Z

13

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

answered Jul 3, 2009 at 9:11

peirix

37.9k24 gold badges98 silver badges130 bronze badges

3 Comments

Boris Callens Over a year ago

Display:none didn't do the trick. In combination with position:absolute it did though. You think you can provide me with an explanation as of why?

peirix Over a year ago

position: absolute will take any element out of the render flow, making it have no impact on any other element around it. It's a very common method for overlays and modals.

Dastin Over a year ago

Maybe it's too old, it doesn't work anymore (unfortunately T.T)

Bhaskar · Accepted Answer · 2009-07-03 09:39:39Z

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.

edited Jul 3, 2009 at 9:39

answered Jul 3, 2009 at 9:04

Bhaskar

10.7k6 gold badges56 silver badges64 bronze badges

2 Comments

Joe Chung Over a year ago

It's visibility: hidden, not visible: false, and it's visibility: visible, not visible: true.

Boris Callens Over a year ago

Please refer to the last sentence of the second paragraph in my post

Rahul · Accepted Answer · 2009-07-03 09:08:27Z

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 Jul 3, 2009 at 9:08

Rahul

12.3k5 gold badges46 silver badges64 bronze badges

1 Comment

Bhaskar Over a year ago

I think, this is the only way you can do this using CSS (as the question suggests)...

Karlo J. · Accepted Answer · 2020-05-31 01:15:44Z

1

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.

answered May 31, 2020 at 1:15

Karlo J.

111 bronze badge

Comments

rahul · Accepted Answer · 2009-07-03 09:30:52Z

0

Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.

You can set the display to none if you want to hide the element and display to block or inline if you want to show them.

To have a look on display check this

If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.

Can you please post the complete code?

edited Jul 3, 2009 at 9:30

answered Jul 3, 2009 at 9:09

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Maxim Zaslavsky · Accepted Answer · 2009-07-03 08:59:32Z

-1

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.

answered Jul 3, 2009 at 8:59

Maxim Zaslavsky

18.2k31 gold badges113 silver badges175 bronze badges

3 Comments

Boris Callens Over a year ago

I know, but if possible I would rather not rely on JS as it will also run on no-JS machines.

Maxim Zaslavsky Over a year ago

Oh okay! I'm a newbie at StackOverflow, so should I delete my answer? Thanks!

Boris Callens Over a year ago

No, just keep as is. It is a valid answer, just not the best one ;)

Collectives™ on Stack Overflow

Make input invisible through css?

7 Answers 7

5 Comments

3 Comments

2 Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

3 Comments

2 Comments

1 Comment

Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related