I have been setting up a login form and because it is obvious to chrome, that the input fields are meant as a "login" to the website, chrome does its due diligence and offers to auto-fill the form with its known username and password account options.
However, when chrome does this, it does not honor the CSS properties (the properties I am most interested in are the "font-size" and "color").
I think the code below properly demonstrates the issue that I have been experiencing.
.input-stack {
margin: 50px;
display: grid;
grid-template-rows: auto;
}
input {
font-size: 2rem;
color: white;
background-color: #30A0A0;
}
.instruction {
padding-bottom: 20px;
font-size: 1.2rem;
}
.question {
font-weight: bold;
font-size: 1.2rem;
padding-bottom: 20px;
}<div class="input-stack">
<h2>Recreation Steps</h2>
<ol type="1" class="instruction">
<li>Click on the "Email Address" column below.</li>
<li>If you have stored login accounts (google's password manager), chrome will prompt you with a pop-up asking which account to use.</li>
<li>As you mouse over any of the options, notice how the "Email Address" input field is not honoring the 2rem font size that I have assigned to all input fields.</li>
<li>Also you will notice that the font color and background color are changed if you select any of the accounts that google has provided.</li>
</ol>
<span class="question">So ... this leads me to my question: How do we force chrome to honor the CSS settings that I have given to the input fields (at all times and in any case)?</span>
<label for="username">Email Address:</label>
<input id="username" type="text" />
<span> </span>
<label for="password">Password:</label>
<input id="password" type="password" />
</div>