How can I hide an element?

Question

I'm trying to disable browser 'Save Password' functionality (my previous question). To do that, I just added a new input type="password" field inside the form, So this is the code:

<form method="post" action="yoururl"> <input type="password" style="display:none"/><!-- Making "Save Password" disable --> <input type="text" name="username" placeholder="username"/> <input type="password" name="password" placeholder="password"/> </form>

Note: Using autocomplete=false won't work on modern browsers. So please don't suggest it. In fact I'm trying to use this approach.

Well what's the problem? When I hide that useless input by display:none, it doesn't work (I mean still that saving password option is there.). But when I hide that useless input by visibility:hidden, it works.

As you know visibility property takes up space on the page which I don't want that. So how can I hide that useless input to both hide it and remove its space?

display:none is good, but destroys my purpose of adding that useless input.
visibility:hidden isn't good because it takes up space on the page.

So is there the other way?

@RoryMcCrossan Yes it works, but seems really abnormal (ugly) :-) — Martin AJ
– Martin AJ, Commented Jul 6, 2016 at 12:45
css-tricks.com/video-screencasts/142-hiding-things-with-css Choose one ;) — max
– max, Commented Jul 6, 2016 at 12:47
It's not ideal, but it's all you can do in cases where an element has to take up space in the DOM but you don't want it to be seen. It also works for pre-loading images too. — Rory McCrossan
– Rory McCrossan, Commented Jul 6, 2016 at 12:52
You can add pointer-events: none if you wish to make the <input> disabled for mouse interactions. — Cookie Ninja
– Cookie Ninja, Commented Jul 6, 2016 at 12:53

Rounin · Accepted Answer · 2016-07-06 13:08:19Z

1

There are many possible solutions.

One might be:

input[type='password']:nth-of-type(1) { visibility: hidden; width: 1px; height: 1px; }

edited Jul 6, 2016 at 13:08

answered Jul 6, 2016 at 12:51

Rounin

29.9k13 gold badges103 silver badges127 bronze badges

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

3 Comments

Martin AJ Over a year ago

Why not 0px ? :)

Rounin Over a year ago

I wasn't immediately sure if the browser would accept that, but width:0; height:0; appears to be fine after all.

AlexisWbr Over a year ago

@Rounin There is a difference in fact. If you declare width and height to 0px, the browsers will think the element is display: none, and the screenreaders will not be able to use the element.

Community · Accepted Answer · 2017-05-23 12:14:44Z

1

See this answer.

I think method 1 is best for you, which is setting width and height of element to 0.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Jul 6, 2016 at 12:55

Arnav Borborah

11.8k8 gold badges51 silver badges94 bronze badges

Comments

Red · Accepted Answer · 2016-07-06 12:59:51Z

You can disable the autofill trough this autocomplete="new-password"

But if you want to delete the space it take just position it as absolute and hide it behind the body with z-index: -9999;

.fakepassword { visibility: none; position: absolute; z-index: -9999; }

autocomplete="new-password" works perfectly .. Thank you .. upvote

Collectives™ on Stack Overflow

How can I hide an element?

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Linked

Related