[html, css] <input type="password"> 입력값이 보이지 않을 때

<input type="password"> 입력값이 보이지 않을 때

input type을 password로 지정해 비밀번호를 받으려고 하니 기호(●)없이 입력되는 문제가 발생했다. 이런 현상이 발생하는 이유는 나눔스퀘어 폰트를 사용하고 있었기 때문이다. 물론 다른 폰트를 사용해도 이와 같은 문제가 발생할 수 있다. 이런 문제가 발생하는 폰트에는 ● 문자를 지원하지 않아서이다.

 

 

 

 

해결방법

아래와 같은 형식으로 css 코드를 추가해주면 된다. input[type=password]안에는 ● 문자를 지원하는 폰트를 넣으면 된다. 아래 코드에는 구글 폰트를 넣어놨는데 언제까지 될지는 모르겠지만 저대로 써도 아마 작동할 것이다.

input[type=password]::placeholder를 사용하지 않아도 되지만 기존에 사용하던 글씨체와 통일성을 주기 위해서는 이 안에 기존에 사용하는 글꼴을 지정해주는 것이 좋다.

@import url("//fonts.googleapis.com/earlyaccess/nanumgothic.css" );
input[type=password]{
	font-family:"Nanum Gothic", sans-serif !important;
}
input[type=password]::placeholder {
	font-family: "기존에 사용하는 글꼴"; 
}

 

 

 

 

 

 

https://kimdabin.tistory.com/entry/Input-type%EC%9D%B4-password%EC%9D%BC-%EB%95%8C-%EC%9E%85%EB%A0%A5%ED%95%9C-password%EA%B0%80-%EB%B3%B4%EC%9D%B4%EC%A7%80-%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%8A%88

[HTML|CSS] Input type이 password일 때 입력한 password가 보이지 않는 이슈