样式化空文本框 - 仅使用CSS的解决方案

Question

更新 - 2016年3月24日

我希望能够概括一下问题，但看起来它已经被理解为具体的了，是我的失误。这个答案是我之前使用的例子的100%解决方案。

请参考这个 CodePen。

所谓“样式空文本框”的想法是：

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

看起来现在在CSS中不可能实现，也许将来可以。

感谢大家的帮助。

更新-2016年3月23日

这个答案很接近。 但使用:invalid不是一个选择，因为它会使用required=true属性使字段变为必填项。

---

请参考此 CodePen，了解所需行为及其JavaScript实现。该演示仅用于说明应如何操作，使用JavaScript并非预期行为。此外，所使用的颜色仅用于对比，与验证无关。

---

有没有办法只使用CSS样式来为空文本框添加样式？

我尝试了:empty伪类，但不幸的是文本框总是被检测为空；因为它没有子元素或文本节点。更准确地说，文本框是一个自闭合标签。

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

任何指针都将有所帮助。

- Sarbbottam

---

你尝试过使用 active 和 focus 吗？ - Matthew

“focus”属性接近你想要的，但并不完全符合 ---> http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_focus - Arif Burhan

@Matthew，我认为 active 和 focus 并不能告诉你该字段是否为空。 - Sarbbottam

我不相信CSS有任何方法可以告诉你一个输入框是否为空，但是你可以通过active和focus来实现非常接近的效果。这里有一个类似的问题：https://dev59.com/sGQn5IYBdhLWcg3wRlcM - Matthew

https://jsfiddle.net/en3Lxtsn/ 这个链接是使用纯 CSS 实现最接近你想要的效果的方式。 - Matthew

Answer 1

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

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

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

MDN :invalid

- Gerard Sexton

---

我在考虑:invalid，但你被迫使用此输入 - 如果该字段必须具有值，则这并不坏，但如果实际上不需要怎么办？我想这是唯一的方法。 - Matthew

@Matthew 我认为所需的属性在 JavaScript 中是强制执行的，因此如果他尚未使用所需的语义，那么他可以继续忽略它们。 - Gerard Sexton

@GerardSexton 谢谢，我考虑过了，唯一的问题是它将无法适应可选字段的比例，如果没有填写相应的字段，则无法提交表单。 - Sarbbottam

@sarbbottam 没问题。所以你决定使用Javascript了？ - Gerard Sexton

@GerardSexton 可能会放弃这个计划，不想依赖 JavaScript。 - Sarbbottam

Answer 2

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

- Thierry Koblentz

---

厉害了，学会了这个“占位符”技巧，你的解决方案完美地适用于我发布的示例。但实际意图不同，我已经更新了帖子。谢谢！ - Sarbbottam

Answer 3

目前来看，对于更新后的帖子，无法仅使用CSS实现解决方案。

- Sarbbottam