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

Question

更新 - 2016年3月24日

我想概括一下这些问题,但看起来它已被理解为具体,我的不好.这个答案是对我之前使用的例子的100%解决方案.

请参阅此CodePen

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

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

看起来现在不可能在CSS中,可能在将来.

感谢大家的帮助.

更新 - 2016年3月23日

这个答案很接近. 但是使用:invalid不是一种选择,因为它使字段成为必需的required=true属性.

---

请使用javascript 参考此CodePen以获得所需的行为.演示是为了解释它应该如何表现,使用javascript不是预期的行为.使用的颜色也只是为了对比,与验证无关

---

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

我试过,不幸的是总是被检测为空; 因为它没有子节点或文本节点.确切地说,是一个自动关闭的标签.:empty pseudo-classtextboxtextbox

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

任何指针都会有所帮助.

Answer 1

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

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

<input id="in1" required="true">

MDN：无效

Answer 2

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