input=[type="password"] 내용이 공백으로 나오는 경우

사이트를 만들던 중,
회원가입 폼에서 비밀번호 내용이 공백으로 나타났다.
input=[type=password] 부분만 공백으로 나타났고, 구글링을 하였다.

나의 경우에는 2번 경우였다. ㅎㅎ

1. reset.css를 사용하는 경우

reset.css에서 input 값의 font-familly 값도 없을 경우에 발생하는 문제라고 한다.

input[type="password"] {
	font: small-caption;
}

으로 수정한다.

2. 부트스트랩.css를 사용하는 경우

부트스트랩에서 사용하고 있는 폰트가 마음에 안들어서
style.css 내에 다음과 같이 정의했었다.

* { font-family: 'NanumSquare',
    sans-serif !important;
}

sans-serif !important 를 제거하면 패스워드가 정상적으로 입력되었지만
내가 원하는 나눔스퀘어 폰트를 적용시키지 못하였다.

그래서!

1. 내가 사용하고 있는 부트스트랩.css에 들어가서 나눔스퀘어 url을 import
2. 내가 사용하고 싶지 않은 폰트를 모두 'NanumSquare'로 변경

이렇게 했더니 원하는 폰트를 사용하면서 비밀번호가 정상적으로 암호화되어 출력됐다. ㅎㅎ

출처1
출처2