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, Jul 06 '16 at 12:45
https://css-tricks.com/video-screencasts/142-hiding-things-with-css/ Choose one ;) — max, Jul 06 '16 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, Jul 06 '16 at 12:52
You can add `pointer-events: none` if you wish to make the `` disabled for mouse interactions. — Cookie Ninja, Jul 06 '16 at 12:53

Rounin · Accepted Answer · 2016-07-06T13:08:19.860

1

There are many possible solutions.

One might be:

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

edited Jul 06 '16 at 13:08

answered Jul 06 '16 at 12:51

Rounin

27,134
9
83
108

2

Why not `0px` ? :) – Martin AJ Jul 06 '16 at 12:52
I wasn't immediately sure if the browser would accept that, but `width:0; height:0;` appears to be fine after all. – Rounin Jul 06 '16 at 12:55
@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. – AlexisWbr Jul 06 '16 at 12:58

score 1 · Answer 2 · edited May 23 '17 at 12:14

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 '17 at 12:14

Community

1
1

answered Jul 06 '16 at 12:55

Arnav Borborah

11,357
8
43
88

score 1 · Answer 3 · answered Jul 06 '16 at 12:59

1

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;
}

answered Jul 06 '16 at 12:59

Red

6,599
9
43
85

`autocomplete="new-password"` works perfectly .. Thank you .. upvote – Martin AJ Jul 06 '16 at 13:01

How can I hide an element?

3 Answers3