스크립트 없이 주민번호(input password) input 배경 만들기

1. 뒷번호 password로 지정

See the Pen 주민번호(input password) input 배경처리 만들기 by 김보라 (@etbeatbh-the-bashful) on CodePen.

 

저는 특수문자 ●로 배경을 깔았지만 다른 배경이미지로 password 글자 크기에 맞추어 사용하셔도 좋을것 같습니다.

 

 

2. 뒷번호 한자리만 노출 text input 으로 지정

See the Pen 주민번호(input password) input 배경처리 만들기2 by 김보라 (@etbeatbh-the-bashful) on CodePen.

 

뒷자리 입력 필드를 label처럼 보이도록 스타일링하고, 입력 필드의 크기를 한 글자에 맞게 조정했습니다. 입력값이 들어오면 배경색이 흰색으로 바뀌어 label의 ::before 요소가 가려지도록 했습니다.

 

여기서 포인트 ✨

첫번째

엣지 브라우저에서는

눈모양이 폰트사이즈크기에 맞쳐 오른쪽 사이드에 생성이 되는데 이거를 감추기 위해 아래 코드 사용하였습니다.

/* 엣지에서 눈모양 제거 */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
  display: none;
}

 

 

 

두번째

:placeholder-shown: 이 의사 클래스는 input 요소가 placeholder를 표시 중일 때 적용됩니다. 즉, 사용자가 아무 입력도 하지 않은 상태에서만 작동합니다.

반대로

:not(:placeholder-shown): 이 선택자는 placeholder가 표시되지 않을 때, 즉 사용자가 값을 입력한 상태일 때 적용됩니다.

이선택자를 이용하여 입력값이 생기면 배경색을 넣어 기존에 있는 배경색을 가려지도록 처리했습니다.

.personal-password:not(:placeholder-shown) {
    background-color: #fff;
}

 

세번째

label에 input과 같은 focus 선택자를 :focus-within를 주어 label 안에 있는 어떤 입력 필드에 포커스가 있을 때 스타일을 적용할 수 있습니다.

 

.personal-password-container:focus-within {
    border-color: blue;
}

 

 

이번에 글을 쓰면서 패스워드 입력 모양을 바꿀수있는지 갑자기 궁금해졌는데요.

다음에 좀 더 공부해서 기록해보도록 하겠습니다!