input type password 안 보이는 현상

input type password를 사용하다보면 숨겨진 패스워드 표시가 안 보이는 경우가 있다.

 

예시 이미지

 

 

이 경우는 현재 사용중인 폰트가 해당 문자를 지원하지 않아서 발생하는 것으로 input type이 password인것의 font-family를 변경하면 해결된다.

    input[type=password]{
        font-family:"굴림";
    }

위와 같이 코드를 넣으면 되며 적용 시키면 palceholder의 폰트가 바뀐것을 알 수 있다.

 

이 경우에는 placeholder만 원래 쓰던 폰트로 변경을 하면 되는데 코드는 아래와 같다.

    ::placeholder { 
        font-family: 'NanumSquare', sans-serif; 
        opacity: 1; /* Firefox */ 
    } 
    :-ms-input-placeholder { 
        /* Internet Explorer 10-11 */ 
        font-family: 'NanumSquare', sans-serif; 
    } 
    ::-ms-input-placeholder { 
        /* Microsoft Edge */ 
        font-family: 'NanumSquare', sans-serif; 
    }

무엇이든 근본적인 원인이 무엇인지를 파악하는게 가장 좋은 공부법인거 같다.