I'm working on styling some user input and I came across a stumbling block.
I have nothing against the user's using autocomplete (I personally hate it when it's turned off on some sites) as I think it's really handy. I know how I can style it with -webkit-autofill. However, the autocomplete will always result in the fields getting a :valid state even if they shouldn't.
For example, I set a field to be minimum 5 chars long:
<input type="text" required class=namefileds id=first_name name=Name[] placeholder="Enter your first name" minlength="5">
I've set up the CSS styling for valid/invalid cases:
#checkout_form input:invalid {
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
#checkout_form input:valid {
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffcc00' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
And this works fine. To make autofill style work nicely (on all webkit browsers) I added the following CSS rules:
@-webkit-keyframes autofillvalid {
0%,100% {
color: #ffcc00;
background:none;
padding-right: calc(1.5em + 0.75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23ffcc00' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right calc(0.375em + 0.1875rem) center;
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
}
@-webkit-keyframes autofillinvalid {
0%,100% {
background:none;
padding-right: calc(1.5em + .75rem);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center right calc(.375em + .1875rem);
background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
}
input:-webkit-autofill:valid {
-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
-webkit-animation-name: autofillvalid;
-webkit-animation-fill-mode: both;
}
input:-webkit-autofill:invalid {
-webkit-animation-delay: 1s; /* Safari support - any positive time runs instantly */
-webkit-animation-name: autofillinvalid;
-webkit-animation-fill-mode: both;
}
My problem is that if the autofill has a name which is only four-character long, it should get the :invalid state, but autofill always generates the :valid state. Other states selectors looks to work fine, like for example: :focus
I had a look at this question, but I don't want to trigger additional java scripts for now, it's all about the visual at this stage, validation will come later after the user interacts with other things as well. And this is the problem, if the autofill gives the false feeling that the data is valid it can be really frustrating to be shown as invalid at a later stage...
Any idea how can this be styled from CSS only?
If I must use JS:
The other problem is that style does not get updated on the filed till the value is not manually changed, triggering a jQuery .change() event on fields is not helping
As writing the question I decided to do a bit more digging, and to make matters worse, autofill makes the element document.getElementById("first_name").checkValidity() return true, when it should not.
So while I started this with a CSS question, now I'm more inclined to ask can this be behaviour considered a bug?
Edit 1:
Since the checkValidity() returns true, I tried to submit the form (which normally should not be submitted because the validation conditions are not met) and it did submit without any hiccups. Of course the golden rule apply never trust user data and server side will reject it, but I think this should not happen a simple autofill should not automatically mean data is valid.
