使用 CSS 匹配空输入框

小开

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

合作伙伴包括:

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

但是一旦有人开始打字，样式就不会改变(这需要 JS)。

小开

如果字段是 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)

小开

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

我添加了一个类并使用 css 进行样式设计。

.empty { background:none; }

小开

我想知道的答案，我们有明确的属性得到空的输入框，看看这个代码

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

小开

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

小开

如果不需要支持遗留浏览器，则可以使用 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 here: http://jsfiddle.net/0sf6m46j/

小开

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

小开

这对我很有效:

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

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

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

input.my-input-element:invalid {


}

备注:

关于 W3Schools.com的 required: “当出现时，它指定在提交表单之前必须填写一个输入字段。”

小开

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

通过使用这个 CSS4伪类的朋友思想，我能够创建一个只有在用户完成填写之后才触发的表单验证。

以下是关于 CodePen 的专题演讲和解释: Https://codepen.io/johanmouchet/pen/pknxkq

小开

我意识到这是一个非常古老的线程，但事情已经改变了一点，因为它确实帮助我找到正确的组合的事情，我需要得到我的问题解决。所以我想我应该分享一下我的所作所为。

问题是，如果一个可选的输入已经被填充，我需要将相同的 css 应用于它，就像我对一个已填充的必需输入所做的那样。Css 使用了 psuedo 类: validwhich 将 css 应用于可选输入，当没有填充时也是如此。

我就是这么解决的

超文本标示语言

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

CSS

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

小开

如果你很高兴不支持 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>

小开

我在输入中添加了一个类名，然后应用 CSS 规则:

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


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

小开

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

档号: https://developer.mozilla.org/en-US/docs/Web/CSS/:blank。请注意，这是 实验性的，而且没有浏览器现在已经支持它了。

小开

所以我之前在玩 new: where and: is 子句，并构思了这个有趣的东西，在找到这篇文章中的: void 和: placeholder-show 位之后，我想我可能会分享这个可能性，以供将来参考

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

它将 :root { --warning: orange; }颜色应用于任何所需的输入或文本区域，这些输入或者为空或者无效。这就是完全的性感

小开

这就是你让它成为可能的方法。不要忘记将 placeholder=" "和 required设置为您的输入。你可以随意更换道具。

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>