Stack Stack - 5 months ago 7
jQuery Question

How can I hide an element?

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?

Answer

There are many possible solutions.

One might be:

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