CSS Autofill Styes Not Behaving As Desired - css

Question

Using just CSS, I have been working on the login section of my site. I love offering visual feedback for each state anything is on on the page, whether you've clicked it, hovered over it, then depending on what state it is, such as invalid, disabled, or whatnot, however when using the browsers autofill, this is playing havoc on, my thought to be completed section!
I am using Google Chrome, always the latest version.
How It Currently Works
Disabled
No input focus
Enter button has disabled styling
Default
Focus changes input styles
Entering text will change Enter styles
Button has :hover and :active styles for this state
Active - This is when something has been entered and you focus out
Input border and label text color property changes, different to not having any text inputted.
What The Problem Is
I have been attempting to have all current styles and methods stay whilst you use the browser's autofill. I have almost got this completely working, but I am facing these problems:
using autofill...
When you hover over the autofill list, it previews this within the input area which seems to be a state that I do not know how to yet style. Once you click to chose the autofill option, the font-size then adjusts, however all other styles work instantly with the following
.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
transition: all 600000s 0s;
}
After using autofill & focus out
The focus out styles stop working IF it is an auto filled object only, you can delete and enter your own which shows the correct behaviour. Only the label is working when you focus out after autofilling.
body {
padding: 0;
margin: 0;
line-height: 24px;
font-family: "Tahoma", Helvetica, Arial;
font-size: 12px;
background: #1c1e2f;
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
outline: none;
padding: 0px;
margin: 0px;
}
.container {
position: relative;
background-color: #222437;
background-clip: border-box;
border: 1px solid #313452;
border-radius: 6px;
color: white;
margin-bottom: 15px;
}
.justify-content-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center ;
}
.d-flex {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
}
button {
border: none;
padding: 0px;
margin: 0px;
background: none;
cursor: pointer;
}
.auth {
width: 300px;
padding: 15px;
}
.auth input[type="text"] {
display: block;
border: 1px solid #313452;
font-size: 20px;
color: #1864c9;
width: 100%;
height: 55px;
padding: 0 15px;
margin-bottom: 10px;
position: relative;
z-index: 2;
background-color: transparent;
outline: none;
border-radius: 5px;
}
.auth .inputs {
position: relative;
margin: 16px 0 0 0;
}
.auth .input-label {
position: absolute;
top: 15px;
font-size: 1.1rem;
left: 14px;
color: rgb(122, 122, 122);
font-weight: 100;
transition: 0.1s ease;
background-color: #222437;
padding: 0 5px;
}
.auth label:before { display: none; }
.auth input[type="text"]:focus ~ .input-label {
top: -12px;
color: #1864c9;
font-size: 13px;
background-color: #222437;
z-index: 2;
}
.auth input[type="text"]:target ~ .input-label {
top: -7px;
color: #1864c9;
font-size: 13px;
z-index: 2;
}
.auth input[type="text"]::placeholder { opacity: 0; }
.auth input[type="text"]:not(:placeholder-shown) { border: 2px solid rgba(26,115,232,0.25); }
.auth input[type="text"]:not(:placeholder-shown):focus { border: 2px solid rgba(26,115,232,1.00); }
.auth input[type="text"]:not(:placeholder-shown) ~ .input-label {
top: -12px;
font-size: 13px;
z-index: 2;
}
.auth input[type="text"]:not(:placeholder-shown):focus ~ .input-label { color: #1864c9; }
.auth input[type="text"]:not(:placeholder-shown) ~ .input-label { color: rgba(24,100,201,0.50); }
.auth .input:focus { border: 2px solid #1a73e8; }
.auth .link-btn {
height: 20px;
text-decoration: none;
color: #1864c9;
}
.auth .submit {
float: right;
height: 38px;
margin-top:10px;
padding: 0 25px;
border-radius: 5px;
cursor: not-allowed;
color: #313452;
border: 1px solid #313452;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit {
background-color: #1a73e8;
color: white;
cursor: pointer;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit:hover {
background-color: #6CA5F0;
color: #7C7C7C;
cursor: pointer;
}
.auth input[type="text"]:not(:placeholder-shown) ~ .submit:active {
background-color: #0D4186;
color: #AAAAAA;
cursor: pointer;
}
.auth input[type="text"]:-webkit-autofill,
.auth input[type="text"]:-webkit-autofill:focus {
transition: all 600000s 0s;
}
<div class="flex-row d-flex justify-content-center">
<div class="container auth">
<form method="post">
<div class="inputs">
<input type="text" name="api_key" class="input" placeholder="api key">
<label class="input-label">Enter Key</label>
<button class="submit" value="Login">Enter</button>
</div>
</form>
</div>
</div>
Edit the above snippet on CodePen

Answer 1

After researching autofills i found this:
https://bugs.chromium.org/p/chromium/issues/detail?id=953689
So apparently this is a known bug in chromium and other browsers, which for some reason is flagged as Won't Fix.
And if you look at the mdn:
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
It states that this is a know problem, you can't override :-webkit-autofill !important which is set by the browser.
But since i am not happy with this answer i managed to find atleast a somewhat solution to the problem using js from another stack overflow post:
// Fix autocomplete shit
function fix_autocomplete_shit() {
setTimeout(() => {
if ($(this).is(':-internal-autofill-selected')) {
var clone = $(this).clone(true, true);
$(this).after(clone);
$(this).remove();
}
}, 10);
}
$('input').on('input', fix_autocomplete_shit);
This is a pretty shit solution, but it might help you in some way.