使用CSS匹配空输入框

Question

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

input[value=""]

Answer 1

如果只有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)

Answer 2

在现代浏览器中,您可以使用: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/

Answer 3

CSS中没有选择器可以做到这一点.属性选择器匹配属性值,而不是计算值.

你必须使用JavaScript.

Answer 4

更新字段的值不会更新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 5

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

适用于:

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

但是一旦有人开始打字,风格就不会改变(你需要JS).

Answer 6

如果不需要支持旧版浏览器,可以使用的组合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="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/

Answer 7

这对我有用：

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

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

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

input.my-input-element:invalid {

}

笔记：

• 关于required来自w3Schools.com：“当存在时，它指定必须在提交表单之前填写输入字段。”

Answer 8

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

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

这就是我修复它的方式；

HTML

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

CSS

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

Answer 9

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

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

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

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

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

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

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