요소를 숨기려면 어떻게해야합니까?

Question

브라우저의 '비밀번호 저장'기능을 사용 중지하려고합니다 (내 previous question). 이를 위해, 난 그냥 형태 안에 새로운 입력 type="password" 필드를 추가, 그래서이 코드입니다 :

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

참고 :autocomplete=false은 최신 브라우저에서 작동하지 않습니다 사용. 그러니 제안하지 마세요. 사실 this approach을 사용하려고합니다.

뭐가 문제인가?display:none에 의해 쓸모없는 입력을 숨기면 이 작동하지 않습니다. (여전히 비밀번호 저장 옵션이 있습니다.). 그러나 쓸모없는 입력을 visibility:hidden으로 숨기면 작동합니다.

아시다시피 가시성 속성은 내가 원하지 않는 페이지에서 공간을 차지합니다. 그렇다면 어떻게 그것을 숨기고 그 공간을 제거하기 위해 쓸모없는 입력을 숨길 수 있습니까?

• display:none은 좋지만 쓸모없는 입력을 추가하려는 나의 목적을 파괴합니다.
• visibility:hidden은 페이지의 공간을 차지하므로 좋지 않습니다.

다른 방법이 있습니까?

Answer 1

가능한 많은 솔루션이 있습니다.

하나가 될 수 있습니다

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

Answer 2

이 answer를 참조하십시오.

나는 당신이 자동 완성 저점을 해제 할 수 있습니다 0

Answer 3

에 width 및 요소의 height를 설정하는, 방법 1 당신을 위해 최고라고 생각이 autocomplete="new-password"

하지만 공간을 삭제하려면이 걸릴 absolute처럼 position을하고 z-index: -9999;

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