CSS 使用 CSS 匹配空输入框

在本文中，我们将介绍如何使用 CSS 来匹配空的输入框。有时候，我们希望在用户未输入任何内容时对输入框进行特殊样式设置或者添加一些提示信息。通过 CSS，我们可以根据输入框是否为空来实现这些效果。

阅读更多：CSS 教程

通过 :placeholder-shown 伪类匹配空输入框

在 CSS3 中，我们可以使用 :placeholder-shown 伪类来匹配空的输入框。:placeholder-shown 伪类会在输入框中的占位符文本显示时生效，而当用户输入内容后，伪类就不再生效。

以下是一个示例：

input:placeholder-shown {
  border: 2px solid red;
}

上述示例中，当用户未输入任何内容时，边框会变为红色。当用户开始输入内容后，边框颜色会恢复为默认值。

通过 :empty 伪类匹配空输入框

除了使用 :placeholder-shown 伪类，我们还可以使用 :empty 伪类来匹配空输入框。:empty 伪类会选择没有子元素的元素，所以当输入框没有内容时，也会被匹配到。

以下是一个示例：

input:empty {
  background-color: yellow;
}

上述示例中，当输入框为空时，背景颜色会变为黄色。当用户开始输入内容后，背景颜色会恢复为默认值。

通过 :valid 和 :invalid 伪类匹配空输入框

除了使用上述两种伪类，我们还可以使用 :valid 和 :invalid 伪类来匹配空输入框。:valid 伪类会在输入内容合法时生效，而 :invalid 伪类会在输入内容不合法时生效。

以下是一个示例：

input:valid {
  border-color: green;
}

input:invalid {
  border-color: red;
}

上述示例中，当输入框内容为空时，边框颜色会变为红色。当用户输入合法内容后，边框颜色会变为绿色。

需要注意的是，以上两个伪类需要配合使用 HTML5 的表单验证才能生效。在没有设置表单验证的情况下，空输入框不会被匹配到。

总结

通过使用 CSS 的伪类，我们可以方便地匹配空的输入框，并针对不同的匹配情况进行样式设置。这样可以提供更好的用户体验和交互。在实际开发中，我们可以根据需求选择合适的伪类来实现特定的效果。记得在使用 :valid 和 :invalid 伪类时，要注意与 HTML5 表单验证的配合使用。希望本文的内容对你有所帮助！