input password 필드 기본 (입력)모양 바꾸기

 

오늘은 input password 필드의 기본 모양을 어떻게 변경할 수 있는지에 대해 기록해보려 합니다.

우선, input password 대신 input text를 사용합니다. 그 위에 position absolute로 설정한 박스를 덮어, 사용자가 입력할 때마다 원하는 문자나 이미지를 나타나게 설정해 보았습니다.

 

1. input password 입력 모양 바꾸기 (문자로)

See the Pen input password 입력 모양 바꾸기 by 김보라 (@etbeatbh-the-bashful) on CodePen.

• inputField: 실제 비밀번호가 입력되는 input 요소를 가져옵니다.
• passwordDisplay: 비밀번호 입력 시 ●을 표시할 요소를 가져옵니다.
• input 이벤트 리스너: 사용자가 inputField에 입력할 때마다 실행됩니다. 여기서 input 이벤트는 비밀번호 입력을 감지하여, 시각적 표시를 업데이트하는 역할을 합니다.
• length 변수: 사용자가 입력한 비밀번호의 길이를 length 변수에 저장합니다.
• passwordDisplay.innerHTML = '': 매번 이벤트가 발생할 때마다 기존 내용을 초기화하여 중복 표시를 방지합니다.
• for 루프: input 필드에 입력된 비밀번호 길이만큼 반복합니다.
  • dot: 각 ●을 나타내기 위해 span 요소를 생성합니다.
  • dot.classList.add('password-dot'): ● 스타일을 적용하기 위해 password-dot 클래스를 추가합니다.
  • passwordDisplay.appendChild(dot): 생성한 dot 요소를 passwordDisplay에 추가하여 비밀번호 길이만큼 ●이 표시되도록 합니다.
• 표현하고 싶은 문자는 css에서 입력

.password-dot::before {
  content: "＊"; /* 표현하고 싶은 문자 입력 */
  display: inline-block;
}

 

 

 

2. input password 입력 모양 이미지로 바꾸기

See the Pen CodePen Home input password 입력 모양 이미지로 바꾸기 by 김보라 (@etbeatbh-the-bashful) on CodePen.

• 1.코드와 동일, 표현하고 싶은 이미지를 css에서 지정

.password-dot {
    display: inline-block;
    width: 25px;
    height: 20px;
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Noto_Emoji_KitKat_263a.svg/1200px-Noto_Emoji_KitKat_263a.svg.png'); /* 원하는 이미지 경로 */
    background-size: contain;
    background-repeat: no-repeat;
}

 

주의!

1. 자동완성으로 들어갔을경우는 설정된 문구나 이미지가 적용되지 않는것을 확인했습니다.

따라서 속성 autocomplete="off"를 사용했습니다.

 

2. input 박스의 글자색을 투명으로 지정해도 드래그를 할 경우 입력한 글자가 보입니다.

따라서 위를 덥는 박스 passwordDisplay에 배경색을 넣었습니다.

(padding 과 width 값을 주지 않아야 placeholder 입력값을 볼 수 있습니다.)

 

좀 더 확실하게 드래그되는 스타일을 투명으로 바꾸었습니다.

#customPasswordInput::selection {
    background: transparent;    /* 드래그 선택 배경색을 투명하게 설정 */
    color: transparent;         /* 드래그 선택 글자 색도 투명하게 설정 */
}

 

 

연습한 대로 구현해 보았지만, 실제 사용에 적합한지는 확신이 서지 않네요. 이상으로 이번 기록을 마칩니다.