使用CSS匹配一个空的输入框

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

input[value=""]

如果仅是领域，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>

见现场直播的jsfiddle

或取反使用#foo-thing:invalid（贷方为@SamGoody）

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

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

更多信息和浏览器支持：https : //css-tricks.com/almanac/selectors/p/placeholder-shown/

CSS中没有选择器可以执行此操作。属性选择器匹配属性值，而不是计算值。

您将不得不使用JavaScript。

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

而是使用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">

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

适用于：

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

但是一旦有人开始键入，样式就不会改变（您需要使用JS）。

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

使用此功能的好处是valid和invalid伪元素可以很好地与输入字段的type属性一起使用。例如：

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="john_doe@example.com" required />
<input type="url" name="website" placeholder="http://johndoe.com"/>
<input type="text" name="name" placeholder="John Doe" required/>

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

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

这对我有用：

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

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

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

input.my-input-element:invalid {

}

笔记：

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

这个问题可能是在一段时间之前提出的，但是当我最近进入该主题以寻找客户端表单验证时，并且随着:placeholder-shown 支持的不断完善，我认为以下内容可能会对其他人有所帮助。

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

这是有关CodePen的说明和解释：https ://codepen.io/johanmouchet/pen/PKNxKQ

如果您对不支持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>

它对我来说很有效，可以在输入中添加一个类名，然后将CSS规则应用于该类名：

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

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

我对答案有疑问，我们拥有明确的属性来获取空的输入框，请看下面的代码

/*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;
    }
}

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

问题是，我想在填充可选内容时将相同的CSS应用于可选输入，就像我需要填充时一样。CSS使用了psuedo类：valid，该类在未填充时也将CSS应用于可选输入。

这就是我修复它的方式；

的HTML

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

的CSS

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