旧问题,但是对于那些可能会觉得有用的人来说:我做了一个小脚本,它在试图提交时向表单中添加一个类,以便可以设置具有和不是ttempted以不同的方式提交:被试图提交将获得一类_submit-attempted
window.addEventListener('load', function() {
/**
* Adds a class `_submit-attempted` to a form when it's attempted to be
* submitted.
*
* This allows us to style invalid form fields differently for forms that
* have and haven't been attemted to submit.
*/
function addFormSubmitAttemptedTriggers() {
var formEls = document.querySelectorAll('form');
for (var i = 0; i < formEls.length; i++) {
function addSubmitAttemptedTrigger(formEl) {
var submitButtonEl = formEl.querySelector('input[type=submit]');
if (submitButtonEl) {
submitButtonEl.addEventListener('click', function() {
formEl.classList.add('_submit-attempted');
});
}
}
addSubmitAttemptedTrigger(formEls[i]);
}
}
addFormSubmitAttemptedTriggers();
});
现在的形式,所以你只能给这些字段红色框的阴影:
input {
box-shadow: none;
}
form._submit-attempted input {
box-shadow: 0 0 5px #F00;
}