【发布时间】：2020-06-12 20:16:57
【问题描述】：
我正在处理一些用户输入的样式，但遇到了一个绊脚石。
我不反对用户使用自动完成功能（我个人讨厌在某些网站上关闭它），因为我认为它真的很方便。我知道如何使用-webkit-autofill 设置它的样式。但是，自动完成将始终导致字段获得:valid 状态，即使它们不应该这样做。
例如，我将一个字段设置为至少 5 个字符长：
<input type="text" required class=namefileds id=first_name name=Name[] placeholder="Enter your first name" minlength="5">
我已经为有效/无效的情况设置了 CSS 样式：
#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);
}
这很好用。为了使自动填充样式很好地工作（在所有 webkit 浏览器上），我添加了以下 CSS 规则：
@-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;
}
我的问题是，如果自动填充的名称只有四个字符长，它应该得到:invalid 状态，但自动填充总是生成:valid 状态。其他状态选择器看起来工作正常，例如：:focus
我看过this 的问题，但我现在不想触发额外的java 脚本，这一切都与视觉有关，验证将在用户与其他事物交互之后进行。这就是问题所在，如果自动填充给人一种错误的感觉，即数据有效，那么在稍后阶段显示为无效真的很令人沮丧......
知道如何仅通过 CSS 设置样式吗？
如果我必须使用 JS：
另一个问题是在没有手动更改值之前，样式不会在字段上更新，在字段上触发 jQuery .change() 事件没有帮助
在写这个问题时，我决定做更多的挖掘工作，更糟糕的是，自动填充使元素 document.getElementById("first_name").checkValidity() 返回真，而它不应该返回真。
因此，虽然我从一个 CSS 问题开始，但现在我更倾向于问这种行为是否会被视为错误？
编辑 1：
由于checkValidity() 返回true，我尝试提交表单（通常不应该提交，因为不满足验证条件）并且提交时没有任何问题。当然，黄金法则永远不信任用户数据，服务器端会拒绝它，但我认为这不应该发生，简单的自动填充不应该自动意味着数据是有效的。
【问题讨论】：
标签： javascript html css google-chrome webkit