修复H5与App密码框及眼睛图标显示不一致问题

This commit is contained in:
97694732@qq.com 2026-06-03 15:30:37 +08:00
parent 75a145ecd2
commit ac5283d72e

View File

@ -1253,7 +1253,11 @@ export default {
height: 76rpx; height: 76rpx;
padding: 0 16rpx; padding: 0 16rpx;
font-size: 28rpx; font-size: 28rpx;
color: #303133;
box-sizing: border-box; box-sizing: border-box;
width: 100%;
-webkit-appearance: none;
appearance: none;
} }
.form-input:focus { .form-input:focus {
@ -2181,22 +2185,44 @@ export default {
/* ========== 密码框 ========== */ /* ========== 密码框 ========== */
.password-wrapper { .password-wrapper {
position: relative; position: relative;
width: 100%;
display: flex;
align-items: center;
} }
.password-input { .password-input {
padding-right: 80rpx !important; flex: 1;
padding-right: 90rpx !important;
-webkit-appearance: none;
appearance: none;
}
/* H5浏览器密码框默认眼睛图标隐藏 */
.password-input::-webkit-credentials-auto-fill-button,
.password-input::-webkit-reveal,
.password-input::-ms-reveal {
display: none !important;
-webkit-appearance: none;
appearance: none;
}
/* H5密码框自动填充背景色覆盖 */
.password-input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000rpx #ffffff inset !important;
-webkit-text-fill-color: #303133 !important;
} }
.password-eye { .password-eye {
position: absolute; position: absolute;
right: 0; right: 8rpx;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
width: 72rpx; width: 64rpx;
height: 72rpx; height: 64rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 10;
} }
/* ========== 眼睛图标 CSS 实现 ========== */ /* ========== 眼睛图标 CSS 实现 ========== */