样式空文本框 - CSS 唯一解决方案
Style empty textbox - CSS only solution
更新 - 2016 年 3 月 24 日
我想概括这些问题，但看起来它已被理解为具体的，我的错。 是我之前使用的示例的 100% 解决方案。
请参考这个CodePen
所以样式空文本框背后的想法是
textbox:empty ~ label {
// position it as floating label
}
现在看来 CSS 不可能，将来可能会。
谢谢大家的帮助。
更新 - 2016 年 3 月 23 日
接近。
但是使用 :invalid 不是一个选项，因为它使具有 required=true 属性的字段成为必填项。
请参考此 CodePen 以获得所需的行为，javascript.The 演示是为了解释它应该如何表现， 使用 javascript 不是预期的行为。另外颜色只是为了对比，与验证无关
有什么方法可以仅使用 CSS 设置空文本框的样式吗？
我试过:emptypseudo-class，不幸的是textbox总是被检测为空；因为它没有子节点或文本节点。准确的说，textbox是一个自闭标签。
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.
任何指针都会有所帮助。
这可以通过使用 :invalid 并将 input 设置为 required="true"
来实现
input {
padding: 10px;
background-color:red;
}
input:invalid {
background-color:lightblue;
}
<input id="in1" required="true">
可以使用 ::placeholder 伪元素，像这样：http://codepen.io/thierry/pen/oxWMwy
更新后的 post.
不可能有 css 唯一的解决方案（截至目前）
更新 - 2016 年 3 月 24 日
我想概括这些问题，但看起来它已被理解为具体的，我的错。
请参考这个CodePen
所以样式空文本框背后的想法是
textbox:empty ~ label {
// position it as floating label
}
现在看来 CSS 不可能，将来可能会。
谢谢大家的帮助。
更新 - 2016 年 3 月 23 日
:invalid 不是一个选项，因为它使具有 required=true 属性的字段成为必填项。
请参考此 CodePen 以获得所需的行为，javascript.The 演示是为了解释它应该如何表现， 使用 javascript 不是预期的行为。另外颜色只是为了对比，与验证无关
有什么方法可以仅使用 CSS 设置空文本框的样式吗？
我试过:emptypseudo-class，不幸的是textbox总是被检测为空；因为它没有子节点或文本节点。准确的说，textbox是一个自闭标签。
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered.
任何指针都会有所帮助。
这可以通过使用 :invalid 并将 input 设置为 required="true"
input {
padding: 10px;
background-color:red;
}
input:invalid {
background-color:lightblue;
}
<input id="in1" required="true">
可以使用 ::placeholder 伪元素，像这样：http://codepen.io/thierry/pen/oxWMwy
更新后的 post.
不可能有 css 唯一的解决方案（截至目前）