vue3 + vant 密碼輸入框眼睛圖標顯示異常及隱藏方法
在使用vue3和Vant組件庫開發項目過程中,遇到一個密碼輸入框的眼睛圖標顯示異常問題:首次聚焦顯示,再次聚焦消失。 這并非Vant組件自身bug,而是瀏覽器默認密碼輸入框樣式導致的。
為了解決此問題,并根據項目需求隱藏該圖標,可以使用以下css代碼:
input[type="password"]::-webkit-toggle-password { /* chrome */ -webkit-appearance: none !important; display: none !important; } input[type="password"]::-moz-ui-password { /* firefox */ -moz-appearance: none !important; display: none !important; } input[type="password"]::-ms-reveal { /* edge */ display: none !important; }
這段代碼有效地隱藏了Chrome、Firefox和edge瀏覽器中默認的密碼輸入框眼睛圖標。 通過在項目中引入該CSS樣式,即可實現預期效果。
? 版權聲明
文章版權歸作者所有,未經允許請勿轉載。
THE END