使用 CSS 匹配空输入框

Question

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

input[value=""]

Answer 1

虽然目前 (2021-10-01) 没有浏览器支持它，但有人建议使用 :blank 伪类。

参考： https://developer.mozilla.org/en-US /docs/Web/CSS/:空白。
请注意，这是实验，目前没有浏览器支持它。

Answer 2

我对答案感到好奇，我们有明确的属性来获取空输入框，看看这段代码

/*empty input*/
input:empty{
    border-color: red;
}
/*input with value*/
input:not(:empty){
    border-color: black;
}

更新

input, select, textarea {
    border-color: @green;
    &:empty {
        border-color: @red;
    }
}

更多，以便在验证中获得很好的外观

 input, select, textarea {
    &[aria-invalid="true"] {
        border-color: amber !important;
    }

    &[aria-invalid="false"], &.valid {
        border-color: green !important;
    }
}

Answer 3

在现代浏览器中，您可以使用 :placeholder-shown< /a> 定位空输入（不要与 < 混淆代码>::占位符）。

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

在 HTML 中，您必须设置 placeholder 属性。 Chrome 浏览器至少需要一个空格字符作为值。

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

Answer 4

如果只有该字段是必填，您可以使用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>

请参阅 jsFiddle 上的实时

或使用 #foo-thing:invalid 进行否定（信用致@SamGoody）

Answer 5

input[value=""], input:not([value])

适用于：

<input type="text" />
<input type="text" value="" />

但是一旦有人开始输入，样式就不会改变（你需要 JS）。

Answer 6

更新字段的值不会更新其在 DOM 中的 value 属性，因此您的选择器始终匹配字段，即使它实际上不为空。

相反，使用 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">

Answer 7

我意识到这是一个非常古老的线程，但从那以后事情发生了一些变化，它确实帮助我找到了解决问题所需的正确组合。所以我想我应该分享我所做的事情。

问题是，如果可选输入被填充，我需要将相同的 css 应用到可选输入，就像我对填充的必需输入一样。 css 使用了 psuedo 类：valid，它在未填充时也将 css 应用于可选输入。

这就是我修复它的方法；

HTML

<input type="text" required="required">
<input type="text" placeholder="">

CSS

input:required:valid {
    ....
}
input:optional::not(:placeholder-shown){
    ....
}

Answer 8

如果不需要支持旧版浏览器，您可以使用 required、valid 和 invalid 的组合。

使用它的好处是 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/>

作为参考，JSFiddle 在这里： http://jsfiddle.net/0sf6m46j/

Answer 9

这对我有用：

对于 HTML，将 required 属性添加到输入元素

<input class="my-input-element" type="text" placeholder="" required />

对于 CSS，使用 :invalid 选择器来定位空输入

input.my-input-element:invalid {

}

注释：

• 关于 w3Schools.com 中的required：
  “如果存在，它指定在提交表单之前必须填写输入字段。”

Answer 10

$('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');
    }
});

在 jQuery 中。我添加了一个类并使用 css 进行样式设置。

.empty { background:none; }

Answer 11

将类名添加到输入中，然后对其应用 CSS 规则对我来说很有用：

<input type="text" name="product" class="product" />

<style>
input[value=""].product {
    display: none;
}
</style>

Answer 12

这个问题可能已经被问过一段时间了，但是当我最近登陆这个主题寻找客户端表单验证时，并且作为 :placeholder-shown 支持 越来越好，我认为以下内容可能对其他人有帮助。

使用 Berend 使用这个 CSS4 伪类的想法，我能够创建一个仅在用户完成后触发的表单验证填充它。

以下是 CodePen 上的演示和解释：
https://codepen.io/johanmouchet/pen/PKNxKQ

Answer 13

如果您很高兴不支持 IE 或 Chromium Edge 之前的版本（如果您使用它进行渐进增强，这可能没问题），您可以像 Berend 所说的那样使用 :placeholder-shown 。请注意，对于 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>

Answer 14

因此，我之前正在尝试使用新的 :where 和 :is 子句并构想出这一点乐趣，在找到带有 :invalid 和 :placeholder-shown 位的这篇文章后，我想我可能会分享这种可能性以供将来

:required:where( input, textarea ):where( :placeholder-shown, :invalid ) {
    border-color: var(--warning);
}

参考:root { --警告: 橙色; } 任何必需的输入或文本区域的颜色，该输入或文本区域为空或无效。这就是彻头彻尾的性感

Answer 15

这就是您如何使其成为可能的方法。不要忘记为您的输入设置 placeholder=" " 和 required attr。您可以根据需要更改道具。

body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-gp {
    margin-top: 150px;
    position: relative;
    
}
.input-gp input {
    position: relative;
    
}
.input-gp label{
    position: absolute;
    left: 5px;
    bottom: 5px;
    transition: all .4s ease;
}
.input-gp input:placeholder-shown + label{
    left: 10px;
    bottom: 5px;
}
.input-gp input:focus + label,
.input-gp input + label{
    bottom: 30px;
    left: 10px;
}

<body>
 <div class="input-gp ">
<input  type="email" name="" id="email" placeholder=" "       required>
   <label class=" position-absolute" for="email"> Email</label>
  </div>
  
 </body>