使用 CSS 匹配空输入框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3617020/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Matching an empty input box using CSS
提问by Sjoerd
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:
如何将样式应用于空输入框？如果用户在输入字段中键入内容，则不应再应用该样式。这在 CSS 中可能吗？我试过这个：
input[value=""]
回答by lukmdo
If only the field is requiredyou could go with input:valid
如果只有这个领域是required你可以去的input:valid
#foo-thing:valid + .msg { visibility: visible!important; } <input type="text" id="foo-thing" required="required">
<span class="msg" style="visibility: hidden;">Yay not empty</span>See live on jsFiddle
OR negate using #foo-thing:invalid(credit to @SamGoody)
或否定使用#foo-thing:invalid（归功于@SamGoody）
回答by Berend
In modern browsers you can use :placeholder-shownto target the empty input (not to be confused with ::placeholder).
在现代浏览器中，您可以:placeholder-shown用来定位空输入（不要与 混淆::placeholder）。
input:placeholder-shown {
border: 1px solid red; /* Red border only if the input is empty */
}
More info and browser support: https://css-tricks.com/almanac/selectors/p/placeholder-shown/
更多信息和浏览器支持：https: //css-tricks.com/almanac/selectors/p/placeholder-shown/
回答by Quentin
There is no selector in CSS which does this. Attribute selectors match attribute values, not computed values.
CSS 中没有选择器可以做到这一点。属性选择器匹配属性值，而不是计算值。
You would have to use JavaScript.
您将不得不使用 JavaScript。
回答by Shaggy
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.
更新字段的值不会更新其在 DOM 中的 value 属性，这就是为什么您的选择器总是匹配一个字段，即使它实际上不是空的。
Instead use the invalidpseudo-classto achieve what you want, like so:
而是使用invalid伪类来实现您想要的，如下所示：
input:required {
border: 1px solid green;
}
input:required:invalid {
border: 1px solid red;
}<input required type="text" value="">
<input required type="text" value="Value">回答by Draco Ater
input[value=""], input:not([value])
input[value=""], input:not([value])
works with:
与：
<input type="text" />
<input type="text" value="" />
But the style will not change as soon as someone will start typing (you need JS for that).
但是一旦有人开始打字，样式就不会改变（为此您需要 JS）。
回答by My Stack Overfloweth
If supporting legacy browsers is not needed, you could use a combination of required, valid, and invalid.
如果不需要支持旧版浏览器，可以使用的组合required，valid和invalid。
The good thing about using this is the validand invalidpseudo-elements work well with the type attributes of input fields. For example:
使用它的好处是valid和invalid伪元素可以很好地与输入字段的类型属性配合使用。例如：
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;
}<input type="email" name="email" placeholder="[email protected]" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>For reference, JSFiddle here: http://jsfiddle.net/0sf6m46j/
作为参考，JSFiddle在这里：http: //jsfiddle.net/0sf6m46j/
回答by Israel Morales
$('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');
}
});
in jQuery. I added a class and styled with css.
在 jQuery 中。我添加了一个类并使用 css 进行了样式设置。
.empty { background:none; }
回答by Ariella
This worked for me:
这对我有用：
For the HTML, add the requiredattribute to the input element
对于 HTML，将required属性添加到 input 元素
<input class="my-input-element" type="text" placeholder="" required />
For the CSS, use the :invalidselector to target the empty input
对于 CSS，使用:invalid选择器定位空输入
input.my-input-element:invalid {
}
Notes:
笔记：
- About
requiredfrom w3Schools.com: "When present, it specifies that an input field must be filled out before submitting the form."
- 关于
required来自w3Schools.com：“当存在时，它指定必须在提交表单之前填写输入字段。”
回答by Johan M.
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 :placeholder-shownsupport is getting better, I thought the following might help others.
这个问题可能是在一段时间前被问到的，但是当我最近在这个主题上寻找客户端表单验证时，随着:placeholder-shown支持越来越好，我认为以下内容可能对其他人有所帮助。
Using Berendidea of using this CSS4 pseudo-class, I was able to create a form validation only triggered after the user is finished filling it.
使用使用此 CSS4 伪类的Berend想法，我能够创建仅在用户完成填充后触发的表单验证。
Here is ademo and explanation on CodePen: https://codepen.io/johanmouchet/pen/PKNxKQ
这是 CodePen 上的演示和解释：https://codepen.io/johanmouchet/pen/PKNxKQ
回答by Sora2455
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 :placeholder-shownas Berend has said. Note that for Chrome and Safari you actually need a non-empty placeholder for this to work, though a space works.
如果您很高兴不支持 IE 或 Chromium Edge 之前的版本（如果您将其用于渐进式增强，这可能没问题），您可以:placeholder-shown像 Berend 所说的那样使用。请注意，对于 Chrome 和 Safari，您实际上需要一个非空的占位符才能使其工作，尽管空格有效。
*,
::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;
}<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>