vue3 및 vant 프레임을 사용할 때 암호 입력 상자의 눈 아이콘을 숨기는 방법은 무엇입니까?

Vant 암호 입력 상자에 눈 아이콘을 표시하는 문제 해결

vue3 및 vant 프레임 워크를 사용하여 프로젝트를 구축 할 때 개발자는 종종 눈 아이콘을 보여주는 암호 입력 상자에 문제가 발생합니다. 이것은 vant 프레임 워크의 버그가 아니라 암호 입력 상자에 대한 브라우저 자체의 기본 동작입니다. 암호 가시성을 다룰 때 다른 브라우저가 눈 아이콘을 표시하거나 숨길 수있어 일관성이없는 디스플레이가 발생합니다.

많은 개발자들이 인터페이스의 일관성을 유지하기 위해이 눈 아이콘을 완전히 제거하려고합니다. CSS 스타일을 통해 브라우저의 기본 스타일을 무시하여 아이콘을 숨길 수 있습니다. 다음은 주류 브라우저를위한 CSS 코드입니다.

 입력 [type = "password"] ::-webkit-toggle-password { / * chrome * /
  -webkit-appearance : 없음! 중요;
  디스플레이 : 없음! 중요;
}
입력 [type = "password"] ::-Moz-ui-password { / * firefox * /
  -Moz-appearance : 없음! 중요;
  디스플레이 : 없음! 중요;
}
입력 [type = "password"] ::-MS-Reveal { / * edge * /
  디스플레이 : 없음! 중요;
}

위의 CSS 코드를 프로젝트 스타일 시트에 추가하여 Chrome, Firefox 및 Edge 브라우저에서 암호 입력 상자의 눈 아이콘을 효과적으로 숨겨 Vant 비밀번호 입력 상자의 디스플레이 효과가 다른 브라우저에서 일관성이 유지되도록합니다. 이를 통해 사용자 경험을 향상시키고 브라우저 차이로 인한 시각적 혼란을 피할 수 있습니다.

위 내용은 vue3 및 vant 프레임을 사용할 때 암호 입력 상자의 눈 아이콘을 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!