Html 样式空文本框-仅CSS解决方案

更新-2016年3月24日

我想概括一下这些担忧，但似乎已经被理解为是具体的，我的错。这是我之前使用的示例的100%解决方案

请参考这个

因此，样式空文本框背后的想法是

textbox:empty ~ label {
 // position it as floating label
}

现在在CSS中似乎不可能，将来可能会。

谢谢大家的帮助。 更新-2016年3月23日

很接近。 但是使用

：invalid

不是一个选项，因为它使字段必须具有

required=true

属性

---

有关javascript的所需行为，请参阅本文。演示是为了解释它应该如何运行，使用javascript不是预期的行为。此外，使用的颜色只是为了对比，与验证无关

---

有没有办法只使用CSS设置空文本框的样式？

我尝试了

伪类

，不幸的是

文本框

总是被检测为空；因为它没有子节点或文本节点。准确地说，

textbox

是一个自动关闭标签

：empty伪类表示完全没有子元素的任何元素。只考虑元素节点和文本（包括空格）

---

任何指针都会有帮助。

这可以通过使用

：invalid

并将

输入设置为
required=“true”


输入{
填充：10px；
背景色：红色；
}
输入：无效{
背景颜色：浅蓝色；
}
可以使用
：：占位符
伪元素，如下所示：
不可能为更新后的帖子提供仅css的解决方案（目前为止）

你试过使用active和focus吗？focus属性很接近，但不完全是你想要的--->@Matthew我不认为，
active
和
focus
会告诉你字段是否为空，我不相信CSS有任何方法可以判断输入框是否为空，但你可以通过积极和专注来获得难以置信的亲密。这里有一个类似的问题，不管怎样，这是你用纯CSSI想到的最接近的问题：无效，但是你不得不使用这个输入-如果这个字段必须有一个值不是坏事，但是如果它实际上不是必需的呢？我想这是唯一的办法。@Matthew我认为必需的属性是在javascript中强制执行的，所以如果他还没有使用必需的语义，那么他可以继续忽略它们。@GerardSexton谢谢，我考虑过了，唯一的问题是它不会与可选字段进行缩放，如果未填写相应字段，则无法提交表单。@sarbbottam没问题。那么你决定使用Javascript了吗？@GerardSexton可能会放弃计划，不想依赖Javascript。太棒了，学会了这个
placeholder
技巧，你的解决方案非常适合我发布的示例。但实际意图有所不同，我已经更新了帖子。谢谢