如何使用 CSS 可靠地设置空输入字段的样式？

使用 CSS 设置空输入字段的样式

一种常见的样式需求是将特定规则应用于空输入字段。这对于向用户提供视觉提示非常有用，例如占位符文本或彩色边框。但是，使用 input[value=""] 选择器来定位空输入可能无法按预期工作。

在现代浏览器中，:placeholder-shown 伪类提供了一种更可靠的方式来设置空输入字段的样式。此伪类的目标是占位符文本当前可见的输入字段，表示输入字段为空。

要将红色边框应用于空输入字段，您可以使用以下 CSS：

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

请注意，您还必须在 HTML 中的输入字段上设置占位符属性：

<input type="text" placeholder=" "> <!-- Do not remove placeholder -->

Chrome 需要至少一个空格字符作为占位符值来触发 :placeholder-shown 伪类。这确保了输入字段在技术上不为空，同时仍允许用户输入。

通过使用 :placeholder-shown，您可以创建针对空输入字段的自定义样式并提供增强的用户反馈。

以上是如何使用 CSS 可靠地设置空输入字段的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！