After creating a login page that initially had a certain aesthetic, I encountered an issue when saving login data in Firefox. The saved login page took on a yellow-ish tint that was not present in my original design:
https://i.sstatic.net/LURG3.png
I am now seeking advice on how to remove this unwanted tint and potentially implement my own custom effect. I have explored the possibility of using the -webkit-autofill pseudoclass as suggested in some online posts, but unfortunately, it did not work for me.
Below is a snippet of my code:
button {
border: none;
border-radius: 2px;
box-sizing: border-box;
height: 25px;
margin: 5px;
padding: 0;
outline: none;
background-color: #0060df;
color: rgb(230, 230, 231);
}
.text-input {
height: 25px;
box-sizing: border-box;
border: 1px solid #5a5a5c;
border-radius: 2px;
padding: 0 5px;
margin: 5px;
background-color: #474749 !important;
color: rgb(230, 230, 231) !important;
}
#login-form {
display: flex;
flex-direction: column;
padding: 25px;
border-radius: 2px;
background-color: #323234;
}<div id="login-form">
<input type="text" class="text-input" id="name-input" placeholder="Name"/>
<input type="password" class="text-input" id="password-input" placeholder="Password"/>
<button id="login-button">Login</button>
</div>Even adding !important did not alleviate the issue (as far as I can determine from the snippet).
Sincerely, Blakk