使用CSS匹配空输入框

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

input[value=""]

---

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

您必须使用JavaScript。

input[value=”“]，input:not（[value]）

与以下机构合作：

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

---

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

字段

，你可以使用

输入：valid

#foo thing:valid+.msg{visibility:visible！important；}

Y不是空的

在jQuery中。我添加了一个类并使用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中的值属性，因此，即使字段实际上不是空的，选择器也总是匹配字段

相反，使用以下方法来实现您的目标：

输入：必需{
边框：1px纯绿色；
}
输入：必需：无效{
边框：1px纯红；
}

---

如果不需要支持传统浏览器，您可以使用

必需的
、
有效的
和
无效的组合

使用它的好处是
valid
和
invalid
伪元素与输入字段的类型属性配合得很好。例如：


输入：无效，文本区域：无效{
盒影：0 0 5px#D452522；
边框颜色：#b03535
}
输入：有效，文本区域：有效{
盒影：0 0 5px#5cd053；
边框颜色：#28921f；
}
在现代浏览器中，您可以使用显示的
:placeholder
以空输入为目标（不要与
：：placeholder
混淆）

更多信息和浏览器支持：
这对我很有用：

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

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

注意事项：


关于
必填项
发件人：
当存在时，它指定在提交表单之前必须填写输入字段
这个问题可能早就被问过了，但当我最近进入这个主题寻找客户端表单验证时，随着显示的
：占位符越来越好，我认为下面的内容可能会对其他人有所帮助

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

以下是关于代码笔的ademo和解释：
我意识到这是一条非常古老的线索，但此后情况发生了一些变化，它确实帮助我找到了解决问题所需的正确组合。所以我想我会分享我所做的

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

我就是这样修好的

HTML

如果您很高兴不支持IE或pre-Chromium Edge（如果您将其用于渐进式增强，这可能会很好），您可以使用Berend所说的
：所示占位符。请注意，对于Chrome和Safari，您实际上需要一个非空的占位符才能工作，尽管有一个空格可以工作


*，
：：之后，
：：之前{
框大小：边框框；
}
标签{
显示：块；
位置：相对位置；
身高：2.2米；
边缘底部：1米；
}
label.floating-label输入{
字号：1em；
身高：2.2米；
垫面：0.7em；
线高：1.5；
颜色：#495057；
背景色：#fff；
背景剪辑：填充框；
边框：1px实心#ced4da；
边界半径：0.25雷姆；
过渡：边框颜色0.15s缓进缓出，框阴影0.15s缓进缓出；
}
label.floating-label输入：焦点{
颜色：#495057；
背景色：#fff；
边框颜色：#80bdff；
大纲：0；
长方体阴影：0.2rem rgba（0,123,255,0.25）；
}
label.floating-label输入+span{
位置：绝对位置；
顶部：0em；
左：0；
显示：块；
宽度：100%；
字体大小：0.66em；
线高：1.5；
颜色：#495057；
边框：1px实心透明；
边界半径：0.25雷姆；
过渡：字体大小0.1s易入易出，顶部0.1s易入易出；
}
label.floating-label输入：显示占位符{
填充顶部：0；
字号：1em；
}
label.floating-label输入：显示占位符+span{
顶部：0.3em；
字号：1em；
}

浮动标签示例（无JS）
用户名
密码

灵感来源于Bootstrap的。
在输入中添加一个类名，然后对其应用CSS规则对我来说很有效：

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

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


输入[值=”“]。产品{
显示：无；
}
对于稍后找到此答案的任何人：昆廷关于计算值的看法是正确的，但是这里可以使用：empty选择器，它具有合理的支持（除IE8和更旧版本之外的所有浏览器根据：
：empty
选择器仅对空元素起作用，这意味着仅对具有中间为空的开始标记和结束标记的元素以及认为始终为空的单个标记元素起作用，因此它不能用于输入元素，除非
textarea
Not true。请参阅下面lukmo的回答。）。将必需的stAttribute和：valid或：invalid伪选择器组合在一起就可以实现这一点。这是问题提出时的正确答案。必需的属性仅在2011年在Chrome和Firefox中可用，这个答案是从2010年开始的。但是时代变了，这不再是“最好的”回答，所以我没有将其标记为已接受。值属性不可靠
<input class="my-input-element" type="text" placeholder="" required />

input.my-input-element:invalid {

}

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

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

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

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