Видимость пароля не отображается в Chrome и Firefox ⇐ C#

[Anonymous]

В настоящее время я разрабатываю приложение на C# и стремлюсь обеспечить его совместимость со всеми основными веб-браузерами. Однако я столкнулся с проблемой, связанной именно со значком видимости пароля. Этот значок, который позволяет пользователям переключать видимость ввода пароля, правильно отображается в Microsoft Edge, но не отображается в Google Chrome или Mozilla Firefox. Это несоответствие в поведении браузера влияет на взаимодействие с пользователем, и я ищу решение, обеспечивающее единообразное отображение значка видимости пароля во всех браузерах.
Ниже приведен мой код входа, который у меня есть. попробовал:
изображение в Edge:


изображение в Chrome и Firefox:

Код: Выделить всё

        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';
}
});

Код: Выделить всё

        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;
}

Код: Выделить всё

@ViewData["Title"]
 
 




[h4]Login to Admin Migration Portal[/h4]

[img]~/images/WDLogo.png[/img]



Username:


Password:


Login



Please enter both username and password.

/*       @if (TempData["UserAuthStatus"] != null)
{

@TempData["UserAuthStatus"]

}*/



 

Подробнее здесь: https://stackoverflow.com/questions/787 ... nd-firefox