Chrome与Firefox中密码可见性图标不显示问题求助

问题背景 #

开发C#应用时，密码输入框的可见性切换图标仅在Microsoft Edge中正常显示，Google Chrome和Mozilla Firefox中无此控件，导致跨浏览器用户体验不一致。

现象对比 #

• Edge：密码框右侧显示可见性切换图标，点击可切换密码显示状态
• Chrome/Firefox：密码框无任何可见性切换控件

解决方案 #

浏览器对type="password"输入框的默认控件实现存在差异，Edge内置了切换图标，而Chrome/Firefox没有。需通过自定义控件实现跨浏览器统一效果，步骤如下：

1. 重构HTML结构，为密码输入框添加容器并嵌入自定义切换按钮
2. 添加CSS定位，将按钮固定在输入框右侧确保样式统一
3. 实现JavaScript逻辑，点击按钮切换输入框type属性并同步更新图标状态

修改后的完整代码 #

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"]</title>
<link rel="stylesheet" href="~/css/site.css">
<link rel="icon" href="~/wdfavicon.ico" type="image/x-icon">
</head>
<body>
<div class="wrapper">
<div class="content">
<h4>登录到Admin迁移门户</h4>
<div class="logo">
<img src="~/images/WDLogo.png" alt="WD Logo">
</div>
<form class="input-form" method="post" onsubmit="return validateForm()">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" asp-for="Username" class="form-control" id="username" placeholder="输入用户名" aria-describedby="nameHelp">
</div>
<div class="form-group password-container">
<label for="password">密码:</label>
<div class="input-with-icon">
<input type="password" asp-for="Password" class="form-control" placeholder="输入密码" id="password">
<button type="button" class="visibility-toggle" id="togglePassword" aria-label="切换密码可见性">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
</button>
</div>
</div>
<div class="buttons">
<button type="submit" class="btn btn-primary">登录</button>
</div>
</form>
<div class="error-message" id="error-message" style="display: none;">
请输入用户名和密码。
</div>
<!-- @if (TempData["UserAuthStatus"] != null)
{
<div class="error-message">
        @TempData["UserAuthStatus"]
</div>
} -->
</div>
</div>

<script src="~/js/site.js"></script>
</body>
</html>

CSS代码

body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Arial, sans-serif;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
}

.content {
    max-width: 400px;
    width: 100%;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #fff;
}

.logo img {
    max-width: 100%;
    height: 150px;
    margin-bottom: 20px;
    margin-top: 0;
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
    display: flex;
    align-items: center;
}

.form-group label {
    flex: 1;
}

.input-with-icon {
    position: relative;
    flex: 2;
    margin-left: 10px;
}

.form-group input {
    width: 100%;
    height: 30px;
    padding-right: 30px; /* 为图标预留空间 */
    box-sizing: border-box;
}

.visibility-toggle {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    color: #666;
}

.visibility-toggle:hover {
    color: #333;
}

.btn {
    width: 100%;
    background-color: #53a4fe;
    border-color: #53a4fe;
    border-radius: 5px;
    padding: 10px;
    color: #fff;
    cursor: pointer;
}

.btn:hover {
    background-color: #4290e6;
    border-color: #4290e6;
}

.error-message {
    color: red;
    margin-top: 10px;
    text-align: center;
}

JavaScript代码

function validateForm() {
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    const errorMessage = document.getElementById('error-message');

    if (!username && !password) {
        errorMessage.textContent = '请输入用户名和密码。';
        errorMessage.style.display = 'block';
        return false;
    } else if (!username) {
        errorMessage.textContent = '请输入用户名。';
        errorMessage.style.display = 'block';
        return false;
    } else if (!password) {
        errorMessage.textContent = '请输入密码。';
        errorMessage.style.display = 'block';
        return false;
    } else {
        errorMessage.style.display = 'none';
        return true;
    }
}

document.getElementById('username').addEventListener('input', function () {
    const errorMessage = document.getElementById('error-message');
    if (errorMessage.style.display === 'block') {
        errorMessage.style.display = 'none';
    }
});

document.getElementById('password').addEventListener('input', function () {
    const errorMessage = document.getElementById('error-message');
    if (errorMessage.style.display === 'block') {
        errorMessage.style.display = 'none';
    }
});

// 密码可见性切换逻辑
document.getElementById('togglePassword').addEventListener('click', function () {
    const passwordInput = document.getElementById('password');
    const icon = this.querySelector('svg');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        // 切换为隐藏图标
        icon.innerHTML = '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line>';
    } else {
        passwordInput.type = 'password';
        // 切换为可见图标
        icon.innerHTML = '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle>';
    }
});

方案优势 #

• 完全自定义控件，摆脱浏览器默认行为差异，确保所有主流浏览器显示一致
• 使用SVG图标，无需依赖外部字体文件，兼容性更强
• 清晰的状态切换反馈，提升用户操作体验

内容的提问来源于stack exchange，提问作者Pmd