blocks|key|529131|text|这在纯CSS中是不可能的，但可以使用JavaScript来完成。这是一个jQuery+example|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|529132|​|529133|//+use+$.fn.one+here+to+fire+the+event+only+once.
$(':required').one('blur+keydown',+function()+{
++console.log('touched',+this);
++$(this).addClass('touched');
});|code-block|syntax|javascript|529134|/**
+*+All+required+inputs+initially+are+yellow.
+*/
:required+{
++background-color:+lightyellow;
}

/**
+*+If+a+required+input+has+been+touched+and+is+valid,+it+should+be+white.
+*/
.touched:required:valid+{
++background-color:+white;
}

/**
+*+If+a+required+input+has+been+touched+and+is+invalid,+it+should+be+pink.
+*/
.touched:required:invalid+{
++background-color:+pink;
}|529135|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
++<label>
++++Name:
++++<input+type="text"+required>+*required
++</label>
</p>
<p>
++<label>Age:
++++<input+type="text">
++</label>
</p>|529136|529137|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kaleb/9pyMz/^0|10|E|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|14|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]]]

<p>This is not possible in pure CSS, but can be done with JavaScript. This is a <a href="http://jsfiddle.net/kaleb/9pyMz/" rel="noreferrer">jQuery example</a>:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// use $.fn.one here to fire the event only once.
$(':required').one('blur keydown', function() {
  console.log('touched', this);
  $(this).addClass('touched');
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/**
 * All required inputs initially are yellow.
 */
:required {
  background-color: lightyellow;
}

/**
 * If a required input has been touched and is valid, it should be white.
 */
.touched:required:valid {
  background-color: white;
}

/**
 * If a required input has been touched and is invalid, it should be pink.
 */
.touched:required:invalid {
  background-color: pink;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;p&gt;
  &lt;label&gt;
    Name:
    &lt;input type="text" required&gt; *required
  &lt;/label&gt;
&lt;/p&gt;
&lt;p&gt;
  &lt;label&gt;Age:
    &lt;input type="text"&gt;
  &lt;/label&gt;
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|529216|text|在使用HTML5表单验证时，请尝试使用浏览器来检测无效提交/字段，而不是重新发明轮子。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529217|侦听invalid事件以将“invalid”类添加到窗体中。添加了“invalid”类后，您可以使用CSS3+:pseudo选择器设置表单的样式。|offset|length|style|CODE|529218|例如：|529219|//+where+myformid+is+the+ID+of+your+form
var+myForm+=+document.forms.myformid;

var+checkCustomValidity+=+function(field,+msg)+{
++++if('setCustomValidity'+in+field)+{
++++++++field.setCustomValidity(msg);
++++}+else+{
++++++++field.validationMessage+=+msg;
++++}
};

var+validateForm+=+function()+{

++++//+here,+we're+testing+the+field+with+an+ID+of+'name'
++++checkCustomValidity(myForm.name,+'');

++++if(myForm.name.value.length+<+4)+{
++++++++checkCustomValidity(
++++++++++++//+alerts+fields+error+message+response
++++++++++++myForm.name,+'Please+enter+a+valid+Full+Name,+here.'
++++++++);
++++}
};

/*+here,+we+are+handling+your+question+above,+by+adding+an+invalid
+++class+to+the+form+if+it+returns+invalid.++Below,+you'll+notice
+++our+attached+listener+for+a+form+state+of+invalid+*/
var+styleInvalidForm+=+function()+{
++++myForm.className+=+myForm.className+%2B=+'+invalid';
}

myForm.addEventListener('input',+validateForm,+false);
myForm.addEventListener('keyup',+validateForm,+false);
myForm.addEventListener('invalid',+styleInvalidForm,+true);|code-block|syntax|javascript|529220|现在，只需根据我们附加的“invalid”类按您认为合适的方式设置窗体样式即可。|529221|529222|form.invalid+input:invalid,
form.invalid+textarea:invalid+{
++++background:+rgba(255,+0,+0,+.05);
++++border-color:+#ff6d6d;
++++-webkit-box-shadow:+0+0+6px+rgba(255,+0,+0,+.35);
++++box-shadow:+0+0+6px+rgba(255,+0,+0,+.35);
}|529223|entityMap^0|0|2|7|1J|7|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]|$D|Z|E|10|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|13|8|@]|9|@]|A|$]]|$1|Q|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|R|3|S|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|T|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|U|$]]

<p>While using HTML5 form validation, try to use the browser to detect for invalid submissions/fields, rather than re-inventing the wheel.</p>

<p>Listen for the <code>invalid</code> event to add a class of 'invalid' to your form.  With the 'invalid' class added, you can go to town with styling your form using CSS3 <code>:pseudo</code> selectors.</p>

<p>For example:</p>

<pre><code>// where myformid is the ID of your form
var myForm = document.forms.myformid;

var checkCustomValidity = function(field, msg) {
    if('setCustomValidity' in field) {
        field.setCustomValidity(msg);
    } else {
        field.validationMessage = msg;
    }
};

var validateForm = function() {

    // here, we're testing the field with an ID of 'name'
    checkCustomValidity(myForm.name, '');

    if(myForm.name.value.length &lt; 4) {
        checkCustomValidity(
            // alerts fields error message response
            myForm.name, 'Please enter a valid Full Name, here.'
        );
    }
};

/* here, we are handling your question above, by adding an invalid
   class to the form if it returns invalid.  Below, you'll notice
   our attached listener for a form state of invalid */
var styleInvalidForm = function() {
    myForm.className = myForm.className += ' invalid';
}

myForm.addEventListener('input', validateForm, false);
myForm.addEventListener('keyup', validateForm, false);
myForm.addEventListener('invalid', styleInvalidForm, true);
</code></pre>

<p>Now, simply style your form as you see fit based on the 'invalid' class we've attached.</p>

<p>For example:</p>

<pre><code>form.invalid input:invalid,
form.invalid textarea:invalid {
    background: rgba(255, 0, 0, .05);
    border-color: #ff6d6d;
    -webkit-box-shadow: 0 0 6px rgba(255, 0, 0, .35);
    box-shadow: 0 0 6px rgba(255, 0, 0, .35);
}
</code></pre>


blocks|key|529270|text|对于每个未传递checkValidity的元素，在submit事件发生之前，都会在表单元素上触发html5+invalid事件。您可以使用此事件将类应用于周围的窗体和display+:只有在此事件发生后，才能应用无效的样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|529271|+$("form+input,+form+select,+form+textarea").on("invalid",+function()+{
+++++$(this).closest('form').addClass('invalid');
+});|code-block|syntax|javascript|529272|然后，您的CSS将如下所示：|529273|:invalid+{+box-shadow:+none;+}
.invalid+input:invalid,
.invalid+textarea:invalid,
.invalid+select:invalid+{+border:+1px+solid+#A90909+!important;+background-color:+#EEC2C2;+}|529274|第一行删除了默认样式，因此表单元素在页面加载时看起来是中立的。一旦触发了invalid事件(当用户尝试提交表单时)，元素就会以可见的方式呈现为无效。|529275|entityMap^0|P|6|1I|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>There is a html5 <code>invalid</code> event that fires on form elements before the <code>submit</code> event occurs for each element that does not pass checkValidity. You can use this event to apply a class for example to the surrounding form and display :invalid styles only after this event occurs.</p>

<pre><code> $("form input, form select, form textarea").on("invalid", function() {
     $(this).closest('form').addClass('invalid');
 });
</code></pre>

<p>Your CSS would then look something like this:</p>

<pre><code>:invalid { box-shadow: none; }
.invalid input:invalid,
.invalid textarea:invalid,
.invalid select:invalid { border: 1px solid #A90909 !important; background-color: #EEC2C2; }
</code></pre>

<p>The first line removes the default styling, so form elements look neutral at page load. As soon as the invalid event fires (when a user tries to submit the form), the elements are visibly rendered invalid.</p>


blocks|key|745736|text|我在我的代码库中创建了一个小填充程序来处理这个问题。我只是从具有novalidate属性和data-validate-on="blur"属性的<form/>元素开始。它监视该类型的第一个事件。这样，您仍然可以使用原生的:invalid+css选择器来设置表单样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|745737|$(function+()+{
++++$('[data-validate-on]').each(function+()+{
++++++++var+$form+=+$(this);
++++++++var+event_name+=+$form.data('validate-on');

++++++++$form.one(event_name,+':input',+function+(event)+{
++++++++++++$form.removeAttr('novalidate');
++++++++});
++++});
});|code-block|syntax|javascript|745738|entityMap^0|W|A|19|N|1Z|7|31|8|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|L|$]]

<p>I created a small shim to deal with this in my codebase. I just start off with my <code>&lt;form/&gt;</code> element having the <code>novalidate</code> property along with a <code>data-validate-on="blur"</code> attribute. This watches for the first event of that type. This way you can still use the native <code>:invalid</code> css selectors for the form styling.</p>

<pre><code>$(function () {
    $('[data-validate-on]').each(function () {
        var $form = $(this);
        var event_name = $form.data('validate-on');

        $form.one(event_name, ':input', function (event) {
            $form.removeAttr('novalidate');
        });
    });
});
</code></pre>


blocks|key|745784|text|一个不错的方法是使用CSS类抽象:invalid,+:valid，然后使用一些JavaScript检查输入字段是否被聚焦。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|745785|CSS：|745786|input.dirty:invalid{+color:+red;+}
input.dirty:valid{+color:+green;+}|code-block|syntax|javascript|745787|JS：|745788|//+Function+to+add+class+to+target+element
function+makeDirty(e){
++e.target.classList.toggle('dirty');
}

//+get+form+inputs
var+inputs+=+document.forms[0].elements;

//+bind+events+to+all+inputs
for(let+input+of+inputs){
++input.addEventListener('invalid',+makeDirty);
++input.addEventListener('blur',+makeDirty);
++input.addEventListener('valid',+makeDirty);
}|745789|DEMO|745790|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/9z4rLbpa/^0|G|G|0|0|0|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|15|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|S|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|T|$U|$5|V|W|X|E|$Y|Z]]]]

<p>A good way is to abstract <code>:invalid, :valid</code> with a CSS classes and then some JavaScript to check if the input field was focused or not.</p>

<p>CSS:</p>

<pre><code>input.dirty:invalid{ color: red; }
input.dirty:valid{ color: green; }
</code></pre>

<p>JS:</p>

<pre><code>// Function to add class to target element
function makeDirty(e){
  e.target.classList.toggle('dirty');
}

// get form inputs
var inputs = document.forms[0].elements;

// bind events to all inputs
for(let input of inputs){
  input.addEventListener('invalid', makeDirty);
  input.addEventListener('blur', makeDirty);
  input.addEventListener('valid', makeDirty);
}
</code></pre>

<p><a href="https://jsfiddle.net/9z4rLbpa/" rel="nofollow noreferrer">DEMO</a></p>


blocks|key|529415|text|这些答案已经过时了。现在，您可以使用CSS检查占位符伪类。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529416|​|529417|input:not(:placeholder-shown):invalid+{
++++background-color:+salmon;
}
form:invalid+button+{
++++background-color:+salmon;
++++pointer-events:+none;
}|code-block|syntax|javascript|529418|<form>
++++<input+type="email"+placeholder="me@example.com"+required>
++++<button+type="submit">Submit</button>
</form>|529419|529420|它从正常的背景开始，当你在其中输入不完整的电子邮件地址时，它会变成粉色。|529421|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>These answers are out of date. Now you can do this by checking for a placeholder pseudo-class with CSS.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:not(:placeholder-shown):invalid {
    background-color: salmon;
}
form:invalid button {
    background-color: salmon;
    pointer-events: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
    &lt;input type="email" placeholder="me@example.com" required&gt;
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<p>It starts with a normal background and turns pink as you enter you incomplete email address into it.</p>


blocks|key|745887|text|Mozilla用他们自己的:-moz-ui-invalid伪类来解决这个问题，这个伪类只在表单与之交互后才会应用。由于缺乏支持，MDN不建议使用此功能。但是，您可以为Firefox修改它。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|745888|在地平线上有一个:user-invalid规范的4级规范，它将提供类似的行为。|745889|如果这没有帮助，我很抱歉，但我希望它能提供一些背景。|745890|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid|1|https://drafts.csswg.org/selectors-4/#user-error-pseudo^0|D|G|0|0|8|D|1|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]]]

<p>Mozilla takes care of this with their own <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-ui-invalid" rel="nofollow noreferrer">:-moz-ui-invalid</a> pseudoclass that only applies to forms after they've been interacted with. MDN does not recommend using this due to lack of support. However, you can modify it for Firefox. </p>

<p>There's a level 4 spec for a <a href="https://drafts.csswg.org/selectors-4/#user-error-pseudo" rel="nofollow noreferrer">:user-invalid</a> spec on the horizon that will offer similar behavior. </p>

<p>Sorry if this doesn't help, but I hope it offers some context.</p>


blocks|key|529544|text|这里是我的方法，避免默认样式的任何不聚焦的输入为无效，你只需添加一个简单的js命令onFocus，让网页识别focused和unfocused输入，这样所有的输入就不会以无效的样式出现在第一个地方。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|529545|<style>
input.focused:required:invalid+{+background-color:+pink;+color:+white;+}
input:valid+{+background-color:+white;+color:+black;+}
</style>
…
<input+name="foo"+class="notfocused"+onFocus="document.activeElement.className='focused';"+required+/>|code-block|syntax|javascript|529546|你可以在下面自己试试：|529547|​|529548|input.focused:required:invalid+{
++background-color:+pink;
++color:+white;
}

input:required:valid+{
++background-color:+darkseagreen;
++color:+black;
}|529549|<label>At+least+1+charater:</label><br+/>
<input+type="text"+name="foo"+class="notfocused"+onFocus="document.activeElement.className='focused';"+required+/>|529550|529551|entityMap^0|15|7|1I|7|1Q|9|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|13|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|14|8|@]|D|@]|E|$]]|$1|O|3|P|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|Q|3|R|5|H|7|16|8|@]|D|@]|E|$I|J]]|$1|S|3|N|5|6|7|17|8|@]|D|@]|E|$]]|$1|T|3|-4|5|6|7|18|8|@]|D|@]|E|$]]]|U|$]]

<p>Here is my method to avoid the default styling of any unfocused input as invalid, you just have to add a simple js command <code>onFocus</code> to let the webpage to identify <code>focused</code> and <code>unfocused</code> inputs, so all the input will not appear in the style of invalid at first place.</p>

<pre><code>&lt;style&gt;
input.focused:required:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
&lt;/style&gt;
…
&lt;input name="foo" class="notfocused" onFocus="document.activeElement.className='focused';" required /&gt;
</code></pre>

<p>Try it yourself below:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input.focused:required:invalid {
  background-color: pink;
  color: white;
}

input:required:valid {
  background-color: darkseagreen;
  color: black;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;At least 1 charater:&lt;/label&gt;&lt;br /&gt;
&lt;input type="text" name="foo" class="notfocused" onFocus="document.activeElement.className='focused';" required /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|529606|text|这是kzh的answer的VanillaJS+(无jQuery)版本|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|529607|​|529608|{
++let+f+=+function()+{
++++this.classList.add('touched')
++}
++document
++++.querySelectorAll('input')
++++.forEach((e)+=>+{
++++++e.addEventListener('blur',+f,+false)
++++++e.addEventListener('keydown',+f,+false)
++++})
}|code-block|syntax|javascript|529609|/**
+*+All+required+inputs+initially+are+yellow.
+*/
:required+{
++background-color:+lightyellow;
}

/**
+*+If+a+required+input+has+been+touched+and+is+valid,+it+should+be+white.
+*/
.touched:required:valid+{
++background-color:+white;
}

/**
+*+If+a+required+input+has+been+touched+and+is+invalid,+it+should+be+pink.
+*/
.touched:required:invalid+{
++background-color:+pink;
}|529610|<p><label>
++Name:
++<input+type="text"+required>+*required
</label></p>
<p><label>Age:
++<input+type="text">
</label></p>|529611|529612|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/143739/kzh|1|https://stackoverflow.com/a/17369386/476951^0|2|3|0|6|6|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@$A|10|B|11|1|12]|$A|13|B|14|1|15]]|C|$]]|$1|D|3|E|5|6|7|16|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|17|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|M|3|N|5|H|7|19|8|@]|9|@]|C|$I|J]]|$1|O|3|E|5|6|7|1A|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|Q|$R|$5|S|T|U|C|$V|W]]|X|$5|S|T|U|C|$V|Y]]]]

<p>This is a VanillaJS (no jQuery) version of <a href="https://stackoverflow.com/users/143739/kzh">kzh</a>'s <a href="https://stackoverflow.com/a/17369386/476951">answer</a></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>{
  let f = function() {
    this.classList.add('touched')
  }
  document
    .querySelectorAll('input')
    .forEach((e) =&gt; {
      e.addEventListener('blur', f, false)
      e.addEventListener('keydown', f, false)
    })
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>/**
 * All required inputs initially are yellow.
 */
:required {
  background-color: lightyellow;
}

/**
 * If a required input has been touched and is valid, it should be white.
 */
.touched:required:valid {
  background-color: white;
}

/**
 * If a required input has been touched and is invalid, it should be pink.
 */
.touched:required:invalid {
  background-color: pink;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;&lt;label&gt;
  Name:
  &lt;input type="text" required&gt; *required
&lt;/label&gt;&lt;/p&gt;
&lt;p&gt;&lt;label&gt;Age:
  &lt;input type="text"&gt;
&lt;/label&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|529659|text|我无可奉告，但是@Carl关于使用:not(:placeholder-shown)的回答非常有用。正如另一个注释提到的，如果你没有占位符，这仍然会显示无效状态(正如一些表单设计所要求的那样)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|529660|要解决此问题，只需添加一个空占位符，如下所示|529661|<input+type="text"+name="username"+placeholder="+"+required>|code-block|syntax|javascript|529662|然后是你的CSS，比如|529663|:not(:placeholder-shown):invalid{+background-color:+#ff000038;+}|529664|对我很管用！|529665|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I can't comment, but to go with @Carl's very useful answer regarding using :not(:placeholder-shown). As another comment mentioned, this will still show the invalid state if you have NO placeholder (as some form designs call for).</p>

<p>To solve this, simply add an empty placeholder like so</p>

<pre><code>&lt;input type="text" name="username" placeholder=" " required&gt;
</code></pre>

<p>Then your CSS, something like</p>

<pre><code>:not(:placeholder-shown):invalid{ background-color: #ff000038; }
</code></pre>

<p>Worked for me!</p>


blocks|key|529720|text|在agouseh的idea之后，您可以使用一些javascript来判断提交按钮何时被聚焦，并在此时显示验证。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|529721|javascript将添加一个类(例如，CSS+)添加到表单字段，然后允许submit-focussed设置无效输入的样式。|style|CODE|529722|这遵循了在用户填写完字段后显示验证反馈的最佳实践，因为根据研究，在此过程中显示它没有额外的好处。|529723|​|529724|document
++.querySelector('input[type=submit]')
++.onfocus+=+function()+{
++++this
++++++.closest('form')
++++++.classList
++++++.add('submit-focussed');
++};|code-block|syntax|javascript|529725|form.submit-focussed+input:invalid+{
++border:+thin+solid+red;
}|529726|<form>
++<label>Email+<input+type="email"+required=""+/></label>
++<input+type="submit"+/>
</form>|529727|529728|jQuery替代方案|529729|(function($)+{
++$('input[type=submit]').on('focus',+function()+{
++++$(this)
++++++.parent('form')
++++++.addClass('submit-focussed');
++});
})(jQuery);+/*+WordPress+compatible+*/|529730|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/users/1296306/aghouseh|1|https://stackoverflow.com/a/36070438/445547^0|1|7|0|9|4|1|0|11|F|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]|$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1J|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1K|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1L|8|@]|9|@]|C|$O|P]]|$1|Q|3|R|5|N|7|1M|8|@]|9|@]|C|$O|P]]|$1|S|3|T|5|N|7|1N|8|@]|9|@]|C|$O|P]]|$1|U|3|K|5|6|7|1O|8|@]|9|@]|C|$]]|$1|V|3|W|5|6|7|1P|8|@]|9|@]|C|$]]|$1|X|3|Y|5|N|7|1Q|8|@]|9|@]|C|$O|P]]|$1|Z|3|-4|5|6|7|1R|8|@]|9|@]|C|$]]]|10|$11|$5|12|13|14|C|$15|16]]|17|$5|12|13|14|C|$15|18]]]]

<p>Following on from <a href="https://stackoverflow.com/users/1296306/aghouseh">agouseh</a>'s <a href="https://stackoverflow.com/a/36070438/445547">idea</a>, you can have a bit of javascript to tell when the submit button has been focussed, and have validation show up at that time.</p>

<p>The javascript will add a class (eg. <code>submit-focussed</code>) to the form field when the submit button is focussed or clicked, which then allows the CSS to style invalid inputs.</p>

<p>This follows the best practice of showing validation feedback after the user has finished filling in the fields, as according to research there is no additional benefit to showing it during the process.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>document
  .querySelector('input[type=submit]')
  .onfocus = function() {
    this
      .closest('form')
      .classList
      .add('submit-focussed');
  };</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>form.submit-focussed input:invalid {
  border: thin solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form&gt;
  &lt;label&gt;Email &lt;input type="email" required="" /&gt;&lt;/label&gt;
  &lt;input type="submit" /&gt;
&lt;/form&gt;</code></pre>
</div>
</div>
</p>

<h2>jQuery alternative</h2>

<pre><code>(function($) {
  $('input[type=submit]').on('focus', function() {
    $(this)
      .parent('form')
      .addClass('submit-focussed');
  });
})(jQuery); /* WordPress compatible */
</code></pre>


<p>I recently discovered that the <code>:invalid</code> pseudo-class applies to <code>required</code> form elements as soon as the page loads. For example, if you have this code:</p>

<pre><code>&lt;style&gt;
input:invalid { background-color: pink; color: white; }
input:valid { background-color: white; color: black; }
&lt;/style&gt;
…
&lt;input name="foo" required /&gt;
</code></pre>

<p>Then your page will load with an empty pink input element on it. Having validation built in to HTML5 is great, but I don't think most users expect the form to validate before they've had a chance to enter any values at all. Is there any way to delay the application of the pseudo-class until the first event affecting that element (form submit, blur, change, whatever's appropriate)? Is it possible to do this without JavaScript?</p>


Delay HTML5 :invalid pseudo-class until the first event

WordPress

jQuery

HTML5

我最近发现，只要页面加载，:invalid伪类就会应用于required表单元素。例如，如果你有这样的代码：<style>input:invalid { background-color: pink; color: white; }input:valid { background-color: white; color...

问Delay HTML5 :在第一个事件之前无效的伪类
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Delay HTML5 :在第一个事件之前无效的伪类EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Delay HTML5 :在第一个事件之前无效的伪类
EN