blocks|key|940019|text|在CSS中没有这样做的选择器。属性选择器匹配属性值，而不是计算值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|940020|您将不得不使用JavaScript。|940021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>There is no selector in CSS which does this. Attribute selectors match attribute values, not computed values.</p>

<p>You would have to use JavaScript.</p>


blocks|key|940131|text|input[value=""],+input:not([value])|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|940132|与以下各项配合使用：|940133|<input+type="text"+/>
<input+type="text"+value=""+/>|code-block|syntax|javascript|940134|但是，一旦有人开始输入，样式就不会改变(您需要JS来实现)。|940135|entityMap^0|0|Z|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p><code>input[value=""], input:not([value])</code> </p>

<p>works with:</p>

<pre><code>&lt;input type="text" /&gt;
&lt;input type="text" value="" /&gt;
</code></pre>

<p>But the style will not change as soon as someone will start typing (you need JS for that).</p>


blocks|key|940192|text|如果字段为required，您可以使用input:valid|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|940193|​|940194|#foo-thing:valid+%2B+.msg+{+visibility:+visible!important;+}++++++|code-block|syntax|javascript|940195|+<input+type="text"+id="foo-thing"+required="required">
+<span+class="msg"+style="visibility:+hidden;">Yay+not+empty</span>|940196|940197|请参阅live+on+jsFiddle|940198|或者使用#foo-thing:invalid进行否定(归功于@SamGoody)|940199|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/4qMLq/1/^0|5|8|J|B|0|0|0|0|0|3|G|0|0|4|I|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|17|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|18|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1A|8|@]|D|@$9|1B|A|1C|1|1D]]|E|$]]|$1|R|3|S|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>If only the field is <code>required</code> you could go with <code>input:valid</code></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>#foo-thing:valid + .msg { visibility: visible!important; }      </code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;input type="text" id="foo-thing" required="required"&gt;
 &lt;span class="msg" style="visibility: hidden;"&gt;Yay not empty&lt;/span&gt;</code></pre>
</div>
</div>
</p>

<p>See <a href="http://jsfiddle.net/4qMLq/1/" rel="noreferrer">live on jsFiddle</a></p>

<p>OR negate using <code>#foo-thing:invalid</code> (credit to @SamGoody)</p>


blocks|key|1154521|text|$('input#edit-keys-1').blur(function(){
++++tmpval+=+$(this).val();
++++if(tmpval+==+'')+{
++++++++$(this).addClass('empty');
++++++++$(this).removeClass('not-empty');
++++}+else+{
++++++++$(this).addClass('not-empty');
++++++++$(this).removeClass('empty');
++++}
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1154522|在jQuery中。我添加了一个类，并用css设置了样式。|unstyled|1154523|.empty+{+background:none;+}|1154524|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>$('input#edit-keys-1').blur(function(){
    tmpval = $(this).val();
    if(tmpval == '') {
        $(this).addClass('empty');
        $(this).removeClass('not-empty');
    } else {
        $(this).addClass('not-empty');
        $(this).removeClass('empty');
    }
});
</code></pre>

<p>in jQuery. I added a class and styled with css.</p>

<pre><code>.empty { background:none; }
</code></pre>


blocks|key|940324|text|更新字段的值不会更新它在DOM中的值属性，这就是为什么选择器总是匹配字段，即使它实际上不是空的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|940325|取而代之的是使用invalid+pseudo-class来实现您想要的，如下所示：|offset|length|style|CODE|940326|​|940327|input:required+{
++border:+1px+solid+green;
}
input:required:invalid+{
++border:+1px+solid+red;
}|code-block|syntax|javascript|940328|<input+required+type="text"+value="">

<input+required+type="text"+value="Value">|940329|940330|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/%253Ainvalid^0|0|8|7|8|K|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@$D|13|E|14|1|15]]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|17|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|Q|3|I|5|6|7|19|8|@]|9|@]|A|$]]|$1|R|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>Updating the value of a field does not update its value attribute in the DOM so that's why your selector is always matching a field, even when it's not actually empty.</p>

<p>Instead use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ainvalid"><code>invalid</code> pseudo-class</a> to achieve what you want, like so:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:required {
  border: 1px solid green;
}
input:required:invalid {
  border: 1px solid red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input required type="text" value=""&gt;

&lt;input required type="text" value="Value"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1154623|text|如果不需要支持传统浏览器，则可以组合使用required、valid和invalid。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154624|使用这种方法的好处是valid和invalid伪元素可以很好地处理输入字段的类型属性。例如：|1154625|​|1154626|input:invalid,+textarea:invalid+{+
++++box-shadow:+0+0+5px+#d45252;
++++border-color:+#b03535
}

input:valid,+textarea:valid+{
++++box-shadow:+0+0+5px+#5cd053;
++++border-color:+#28921f;
}|code-block|syntax|javascript|1154627|<input+type="email"+name="email"+placeholder="john_doe@example.com"+required+/>
<input+type="url"+name="website"+placeholder="http://johndoe.com"/>
<input+type="text"+name="name"+placeholder="John+Doe"+required/>|1154628|1154629|如需参考，请在此处JSFiddle：http://jsfiddle.net/0sf6m46j/|1154630|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/0sf6m46j/^0|K|8|T|5|Z|7|0|A|5|G|7|0|0|0|0|0|I|T|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]|$9|16|A|17|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|18|8|@$9|19|A|1A|B|C]|$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1H|8|@]|D|@$9|1I|A|1J|1|1K]]|E|$]]|$1|T|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]]|U|$V|$5|W|X|Y|E|$Z|10]]]]

<p>If supporting legacy browsers is not needed, you could use a combination of <code>required</code>, <code>valid</code>, and <code>invalid</code>.</p>

<p>The good thing about using this is the <code>valid</code> and <code>invalid</code> pseudo-elements work well with the type attributes of input fields. For example:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>input:invalid, textarea:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}

input:valid, textarea:valid {
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="email" name="email" placeholder="john_doe@example.com" required /&gt;
&lt;input type="url" name="website" placeholder="http://johndoe.com"/&gt;
&lt;input type="text" name="name" placeholder="John Doe" required/&gt;</code></pre>
</div>
</div>
</p>

<p>For reference, JSFiddle here: <a href="http://jsfiddle.net/0sf6m46j/">http://jsfiddle.net/0sf6m46j/</a></p>


blocks|key|1154668|text|在现代浏览器中，您可以使用:placeholder-shown来确定空输入的目标(不要与::placeholder混淆)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154669|input:placeholder-shown+{
++++border:+1px+solid+red;+/*+Red+border+only+if+the+input+is+empty+*/
}|code-block|syntax|javascript|1154670|更多信息和浏览器支持：https://css-tricks.com/almanac/selectors/p/placeholder-shown/|1154671|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/almanac/selectors/p/placeholder-shown/^0|D|I|18|D|0|0|B|1P|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>In modern browsers you can use <code>:placeholder-shown</code> to target the empty input (not to be confused with <code>::placeholder</code>).</p>

<pre><code>input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}
</code></pre>

<p>More info and browser support: <a href="https://css-tricks.com/almanac/selectors/p/placeholder-shown/">https://css-tricks.com/almanac/selectors/p/placeholder-shown/</a></p>


blocks|key|1154782|text|这个问题可能在一段时间前就被问过了，但是当我最近开始关注这个主题寻找客户端表单验证时，并且随着:placeholder-shown+support+变得越来越好，我认为下面的内容可能会对其他人有所帮助。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1154783|通过使用这个CSS4伪类的Berend思想，我能够创建一个只有在用户填写完表单后才触发的表单验证。|1154784|以下是CodePen上的演示和解释：https://codepen.io/johanmouchet/pen/PKNxKQ|1154785|entityMap|0|LINK|mutability|MUTABLE|url|https://caniuse.com/#search=%253Aplaceholder-shown|1|https://stackoverflow.com/a/35593489/5711164|2|https://codepen.io/johanmouchet/pen/PKNxKQ^0|1B|I|1U|8|0|0|D|6|1|0|I|16|2|0^^$0|@$1|2|3|4|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@$9|Y|A|Z|1|10]]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|H|3|I|5|6|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|J|3|-4|5|6|7|19|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]|T|$5|M|N|O|E|$P|U]]]]

<p>This question might have been asked some time ago, but as I recently landed on this topic looking for client-side form validation, and as the <code>:placeholder-shown</code> <a href="https://caniuse.com/#search=%3Aplaceholder-shown" rel="nofollow noreferrer">support </a> is getting better, I thought the following might help others.</p>

<p>Using <a href="https://stackoverflow.com/a/35593489/5711164">Berend</a> idea of using this CSS4 pseudo-class, I was able to create a form validation only triggered after the user is finished filling it.</p>

<p>Here is ademo and explanation on CodePen:
<a href="https://codepen.io/johanmouchet/pen/PKNxKQ" rel="nofollow noreferrer">https://codepen.io/johanmouchet/pen/PKNxKQ</a></p>


blocks|key|1154882|text|我意识到这是一个非常老的线程，但从那以后事情发生了一些变化，它确实帮助我找到了我需要的东西的正确组合来解决我的问题。所以我想我应该分享我的所作所为。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1154883|问题是，如果一个可选输入是已填充的，那么我需要将相同的css应用于它，就像我对一个已填充的必需输入所做的那样。css使用了psuedo类:valid，该类在未填充时也将css应用于可选输入。|1154884|这就是我修复它的方法；|1154885|HTML|1154886|<input+type="text"+required="required">
<input+type="text"+placeholder="">|code-block|syntax|javascript|1154887|CSS|1154888|input:required:valid+{
++++....
}
input:optional::not(:placeholder-shown){
++++....
}|1154889|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I realize this is a very old thread, but things have changed a bit since and it did help me find the right combination of things I needed to get my problem fixed. So I thought I'd share what I did.</p>
<p>The problem was I needed to have the same css applied for an optional input if it was filled, as I had for a filled required. The css used the psuedo class :valid which applied the css on the optional input also when not filled.</p>
<p>This is how I fixed it;</p>
<p>HTML</p>
<pre><code>&lt;input type=&quot;text&quot; required=&quot;required&quot;&gt;
&lt;input type=&quot;text&quot; placeholder=&quot;&quot;&gt;
</code></pre>
<p>CSS</p>
<pre><code>input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}
</code></pre>


blocks|key|940693|text|如果你不喜欢不支持IE或pre-Chromium+Edge+(如果你正在使用它进行渐进式增强，这可能没问题)，你可以使用:placeholder-shown，正如Berend所说的那样。请注意，对于Chrome和Safari，您实际上需要一个非空占位符才能正常工作，尽管可以使用空格。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|940694|​|940695|*,
+::after,
+::before+{
++box-sizing:+border-box;
}

label.floating-label+{
++display:+block;
++position:+relative;
++height:+2.2em;
++margin-bottom:+1em;
}

label.floating-label+input+{
++font-size:+1em;
++height:+2.2em;
++padding-top:+0.7em;
++line-height:+1.5;
++color:+#495057;
++background-color:+#fff;
++background-clip:+padding-box;
++border:+1px+solid+#ced4da;
++border-radius:+0.25rem;
++transition:+border-color+0.15s+ease-in-out,+box-shadow+0.15s+ease-in-out;
}

label.floating-label+input:focus+{
++color:+#495057;
++background-color:+#fff;
++border-color:+#80bdff;
++outline:+0;
++box-shadow:+0+0+0+0.2rem+rgba(0,+123,+255,+0.25);
}

label.floating-label+input%2Bspan+{
++position:+absolute;
++top:+0em;
++left:+0;
++display:+block;
++width:+100%25;
++font-size:+0.66em;
++line-height:+1.5;
++color:+#495057;
++border:+1px+solid+transparent;
++border-radius:+0.25rem;
++transition:+font-size+0.1s+ease-in-out,+top+0.1s+ease-in-out;
}

label.floating-label+input:placeholder-shown+{
++padding-top:+0;
++font-size:+1em;
}

label.floating-label+input:placeholder-shown%2Bspan+{
++top:+0.3em;
++font-size:+1em;
}|code-block|syntax|javascript|940696|<fieldset>
++<legend>
++++Floating+labels+example+(no-JS)
++</legend>
++<label+class="floating-label">
++++<input+type="text"+placeholder="+">
++++<span>Username</span>
++</label>
++<label+class="floating-label">
++++<input+type="Password"+placeholder="+">
++++<span>Password</span>
++</label>
</fieldset>
<p>
++Inspired+by+Bootstrap's+<a+href="https://getbootstrap.com/docs/4.0/examples/floating-labels/">floating+labels</a>.
</p>|940697|940698|entityMap^0|1O|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|V|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|Q|$]]

<p>If you're happy not not supporting IE or pre-Chromium Edge (which might be fine if you are using this for progressive enhancement), you can use <code>:placeholder-shown</code> as Berend has said. Note that for Chrome and Safari you actually need a non-empty placeholder for this to work, though a space works.</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>*,
 ::after,
 ::before {
  box-sizing: border-box;
}

label.floating-label {
  display: block;
  position: relative;
  height: 2.2em;
  margin-bottom: 1em;
}

label.floating-label input {
  font-size: 1em;
  height: 2.2em;
  padding-top: 0.7em;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

label.floating-label input:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

label.floating-label input+span {
  position: absolute;
  top: 0em;
  left: 0;
  display: block;
  width: 100%;
  font-size: 0.66em;
  line-height: 1.5;
  color: #495057;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: font-size 0.1s ease-in-out, top 0.1s ease-in-out;
}

label.floating-label input:placeholder-shown {
  padding-top: 0;
  font-size: 1em;
}

label.floating-label input:placeholder-shown+span {
  top: 0.3em;
  font-size: 1em;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;fieldset&gt;
  &lt;legend&gt;
    Floating labels example (no-JS)
  &lt;/legend&gt;
  &lt;label class="floating-label"&gt;
    &lt;input type="text" placeholder=" "&gt;
    &lt;span&gt;Username&lt;/span&gt;
  &lt;/label&gt;
  &lt;label class="floating-label"&gt;
    &lt;input type="Password" placeholder=" "&gt;
    &lt;span&gt;Password&lt;/span&gt;
  &lt;/label&gt;
&lt;/fieldset&gt;
&lt;p&gt;
  Inspired by Bootstrap's &lt;a href="https://getbootstrap.com/docs/4.0/examples/floating-labels/"&gt;floating labels&lt;/a&gt;.
&lt;/p&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1155045|text|我可以在输入中添加一个类名，然后对其应用CSS规则：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1155046|<input+type="text"+name="product"+class="product"+/>

<style>
input[value=""].product+{
++++display:+none;
}
</style>|code-block|syntax|javascript|1155047|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It worked for me to add a class name to the input and then apply CSS rules to that:</p>

<pre><code>&lt;input type="text" name="product" class="product" /&gt;

&lt;style&gt;
input[value=""].product {
    display: none;
}
&lt;/style&gt;
</code></pre>


<p>How do I apply a style to an empty input box? If the user types something in the input field, the style should no longer be applied. Is this possible in CSS? I tried this:</p>

<pre><code>input[value=""]
</code></pre>


Matching an empty input box using CSS

jQuery

如何将样式应用于空输入框？如果用户在输入字段中键入内容，则不应再应用该样式。这在CSS中是可能的吗？我试过这个：input[value=""]

问使用CSS匹配空输入框
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS匹配空输入框EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS匹配空输入框
EN