[CSS] 패스워드 인풋 박스 input[type=password] 글자 안보이는 경우

 

커서는 보이는데 아무리 입력해도 글자가 안보이는 경우 해결방법

 

일부 웹폰트의 경우 input[type=password]를 지원하지 않는다.

따라서 input[type=password]의 폰트를 변경해주면 된다.

 

위의 캡쳐본의 경우에는 홈페이지 전체적으로 나눔스퀘어 폰트를 사용하고 있었는데 나눔스퀘어 또한 password에 폰트를 지원하지 않는 경우였다.

 

css에 한 줄 추가해서 간단히 해결 가능하다.

input[type=password] {font-family:'Malgun gothic', dotum, sans-serif;}

 

---

[팁]

 

위와 같이 변경하면 패스워드 입력칸의 placeholder 폰트도 변경이 되는데, placeholder 부분에 한번 더 별도로 웹폰트를 지정해주면 된다. 

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  font-family: 'NanumSquare', sans-serif;
  color: #888
  opacity: 1; /* Firefox */
  }

  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #888;
  }  

  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #888;
  }