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

【问题标题】：Style empty textbox - CSS only solution样式空文本框 - 仅 CSS 解决方案
【发布时间】：2016-07-11 12:55:31
【问题描述】：

更新 - 2016 年 3 月 24 日

我想概括这些问题，但看起来它已经被理解为具体了，我的错。 This answer 是我之前使用的示例的 100% 解决方案。

所以样式空文本框背后的想法是

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

现在看来在 CSS 中是不可能的，将来可能会。

感谢大家的帮助。

更新 - 2016 年 3 月 23 日

This answer 已关闭。 但不能使用:invalid，因为它使required=true 属性的字段成为必填项。

请参考CodePen 以了解所需的行为，使用 javascript。演示是为了解释，它应该如何表现，使用 javascript 不是预期的行为。另外使用的颜色只是为了对比，与验证无关

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

我试过:emptypseudo-class，不幸的是textbox总是被检测为空；因为它没有子节点或文本节点。准确地说，textbox 是一个自闭合标签。

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

任何指针都会有所帮助。

【问题讨论】：

你试过用主动和专注的方式玩吗？
focus 属性很接近，但不是您想要的 ---> w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus
@Matthew 我不认为，active 和 focus 会告诉您该字段是否为空
我不相信 CSS 有任何方法可以判断输入框是否为空，但是您可以通过 active 和 focus 获得难以置信的接近。这是一个类似的问题stackoverflow.com/questions/16952526/…
jsfiddle.net/en3Lxtsn 真的是最接近纯 CSS 的地方

【解决方案1】：

这可以通过使用:invalid 并将input 设置为required="true" 来实现

input { 
  padding: 10px;
  background-color:red; 
}
input:invalid {
  background-color:lightblue;
}

&lt;input id="in1" required="true"&gt;

【讨论】：

【解决方案2】：

可以使用::placeholder 伪元素，像这样：http://codepen.io/thierry/pen/oxWMwy

【讨论】：

【解决方案3】：

对于更新的帖子，不可能有一个仅 css 的解决方案（截至目前）。

【讨论】：