HTML 폼 _ 비밀번호 모양 변경

Question

안녕하세요 ! 코린이 입니다ㅠㅠ

HTML 공부하고 있는데, 폼에서 비밀번호 모양이 기본으로 ● ● ● 으로 나오는데

이걸 * 모양으로 바꾸려면 어떻게 해야하나요 ??

<lable for="pw">비밀번호</lable>

<input id="pw" type="password" maxlength="8" placeholder="비밀번호 입력"/>

Answer 1

안녕하세요.

패스워드에 입력할때 나오는 모양을 바꾸실려고 하시는 데

제가 알기로는 패스워드 속성이 원래 그렇게 되어 있는 건데, 자동으로 디스플레이 되는 모양을 변경할 수는 없을꺼 같습니다.

자바스크립트, css 로 수정이 가능할지는 모르겠지만.. 굳이 그렇게 수정해서 사용해야 되야하는지도 의문이네요.

Answer 2

webkit 계열의 브라우저(사파리, 크롬, 엣지 등)의 경우 -webkit-text-security 라는 css 항목을 통하여 사용 가능하나, 이외의 브라우저까지 호환성을 확보하려면 패스워드 항목의 폰트를 바꾸어 임의로 지정해주는 방법이 있습니다.

호환범위 : https://caniuse.com/?search=text-security

참고문서 : https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-security

#pw { -webkit-text-security: circle; }

Answer 3

안녕하세요~! 아하(Aha) 지식답변자 다라닝입니다.

질문하신 내용에 대하여 아래와 같이 답변드립니다.

우선 모바일이어서 소스코드 자체를 올려드리지 못하는 점이 있습니다.

말씀하신부분은 마스킹이라고 합니다.

사용자가 타이핑할때 문자나 숫자가 아닌 다른형태로 대체해주는 방법인데요.

글자이미지로 마스킹하거나

Css로 스타일 넣어서 하는 방법이 있습니다.

(Pc환경에서 관련소스 찾아서 달아드리겠습니다)

부족하지만 도움이 되셨기를 바라며 추가적인 문의가 필요하시면 답변 부탁드려요!