CSS를 사용하여 암호 필드를 모방하도록 텍스트 입력 스타일을 지정할 수 있습니까?

암호 필드와 유사하도록 텍스트 입력 스타일

질문:

type=을 사용하여 입력 요소를 만드는 것이 가능합니까? "text"는 순수 CSS를 사용하여 type="password"(예: 실제 입력 숨기기)와 동일하게 표시됩니까?

답변:

예, 달성할 수 있습니다. 실험적인 CSS 선택기 -webkit-text-security:

<code class="css">input.pw {
  -webkit-text-security: disc;
  text-security: disc;
}</code>

를 사용하여 이 효과를 적용합니다. 이 CSS 규칙에서 -webkit-text-security 및 text-security는 pw 클래스가 있는 입력 요소를 대상으로 하며 입력이 다음과 같이 지정됩니다. 사용자의 입력을 모호하게 하기 위해 디스크 문자(•)를 표시해야 합니다.

시연하려면 다음 HTML 코드를 고려하세요.

<code class="html"><input type="text" class="pw" value="abcd">

<button onclick="this.previousElementSibling
.classList.toggle('pw')">Toggle '•'</button></code>

이 요소와 상호 작용할 때 토글 버튼이 표시됩니다. 입력을 일반 텍스트로 표시하거나 디스크 문자로 모호하게 표시하는 방식을 전환합니다.

위 내용은 CSS를 사용하여 암호 필드를 모방하도록 텍스트 입력 스타일을 지정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!