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

Question

更新 - 2016年3月24日

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

请参阅此CodePen

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

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

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

谢谢大家的帮助。

更新 - 2016年3月23日

This answer已接近尾声。 但使用:invalid不是一个选项，因为它会使该字段成为required=true属性的必填字段。

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

是否有办法仅使用CSS设置空文本框的样式？

我尝试:empty pseudo-class，遗憾的是textbox始终被检测为空;因为它没有子节点或文本节点。确切地说，textbox是一个自动关闭的标签。

  

    

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

  

任何指针都会有所帮助。

Answer 1

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

来实现

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

MDN :invalid

Answer 2

可以使用h3 = t.find_all("h3"), line 21伪元素，如下所示：http://codepen.io/thierry/pen/oxWMwy

Answer 3

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