密码可见性在 Chrome 和 Firefox 中不显示

问题描述 投票：0回答：1

我目前正在开发一个 C# 应用程序，旨在确保所有主要网络浏览器的兼容性。但是，我遇到了一个与密码可见性图标有关的问题。该图标允许用户切换密码输入的可见性，在 Microsoft Edge 中正确显示，但在 Google Chrome 或 Mozilla Firefox 中不显示。浏览器行为的这种不一致正在影响用户体验，我正在寻求一种解决方案来确保密码可见性图标在所有浏览器中一致显示。

以下是我尝试过的登录代码：

<!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 your external CSS -->
<link rel="icon" href="~/wdfavicon.ico" type="image/x-icon"> <!-- Add this line to set the favicon -->
<style>
        body, html {
            height: 100%;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif; /* Improve font */
        }
 
        .wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            /*background-color: #f4f4f4; /* Light background color */
        }
 
        .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; /* Align items vertically within .form-group */
        }
 
            .form-group label {
                flex: 1; /* Take up remaining space */
            }
 
            .form-group input {
                flex: 2;
                margin-left: 10px;
                height: 30px; /* Adjust the height as needed */
                width: 300px; /* Fixed width for input fields */
            }
 
        .btn {
            width: 100%;
            background-color: #53a4fe;
            border-color: #53a4fe;
            border-radius: 5px; /* Add a slight curve to the edges */
            padding: 10px; /* Adjust padding for better appearance */
            color: #fff; /* Button text color */
            cursor: pointer; /* Change cursor to pointer */
        }
 
            .btn:hover {
                background-color: #4290e6;
                border-color: #4290e6;
            }
 
        .error-message {
            color: red;
            margin-top: 10px;
            text-align: center;
        }
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<h4>Login to Admin Migration Portal</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">Username:</label>
<input type="text" asp-for="Username" class="form-control" id="username" placeholder="Enter your username" aria-describedby="nameHelp">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" asp-for="Password" class="form-control" placeholder="Enter your password" id="password">
</div>
<div class="buttons">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
<div class="error-message" id="error-message" style="display: none;">
                Please enter both username and password.
</div>
            @if (TempData["UserAuthStatus"] != null)
            {
<div class="error-message">
                    @TempData["UserAuthStatus"]
</div>
            }
</div>
</div>
 
    <script src="~/js/site.js"></script> <!-- Link your external JavaScript -->
<script>
        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 = 'Please enter both username and password.';
                errorMessage.style.display = 'block';
                return false;
            } else if (!username) {
                errorMessage.textContent = 'Please enter your username.';
                errorMessage.style.display = 'block';
                return false;
            } else if (!password) {
                errorMessage.textContent = 'Please enter your password.';
                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') {
                // Remove error message if there's a change in the username field
                errorMessage.style.display = 'none';
            }
        });
 
        document.getElementById('password').addEventListener('input', function () {
            const errorMessage = document.getElementById('error-message');
            if (errorMessage.style.display === 'block') {
                // Remove error message if there's a change in the password field
                errorMessage.style.display = 'none';
            }
        });
</script>
</body>
</html>

边缘图像： visibility icon

chrome 和 Firefox 中的图像： Not visible icon

c# html css google-chrome firefox
1个回答
0
投票

你可以检查CSS自动前缀。

短视频：

https://youtube.com/shorts/PT3hX7BY70I?si=a0EcfawE7IeZvepQ

或文档：

https://github.com/postcss/autoprefixer

最新问题
© www.soinside.com 2019 - 2025. All rights reserved.