[CSS] input password 안 보이는 현상

회원가입 구현한 form

✏️ 문제 상황

HTML 코드에서 input type이 password 일 때, password가 입력되었으나 표시되지 않았다.

🧐 문제 원인

구현하려는 웹 페이지의 font-family가 나눔스퀘어로 설정되었고, 나눔스퀘어 글꼴에서는 password type일 때 표시하는 (●) 기호가 없어서 표기되지 않았다.

😊 해결 방안

비밀번호를 입력했을 때와 입력 전에 보여지는 글꼴을 다르게 설정한다.

input[type=password] {
    font-family:"나눔스퀘어를 제외한 글꼴", sans-serif !important;
}

input[type=password]::placeholder {
    font-family: "NanumSquare"; 
}

input[type=password] 는 CSS 선택자, 웹 페이지의 모든 비밀번호 입력필드를 선택

font-family:"Nanum Gothic", sans-serif 는 password가 입력될 때 해당 폰트를 나눔스퀘어 제외한 다른 글꼴들을 지정

!important 는 다른 스타일 규칙에 오버라이드 되는 것을 방지

input[type=password]::placeholder 는 CSS 선택자, 비밀번호 입력 필드의 placeholder (미리 보이는 hint) 텍스트에 대한 스타일을 지정

 

출처

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