為什么vant密碼輸入框的眼睛圖標會在重新聚焦時消失?如何隱藏這個圖標?

為什么vant密碼輸入框的眼睛圖標會在重新聚焦時消失?如何隱藏這個圖標?

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
喜歡就支持一下吧
點贊6 分享