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

CSS 中的空输入字段样式

根据输入字段的空状态查询输入字段需要 CSS 中的特定方法。虽然提供的 input[value=""] 选择器在现代浏览器中不起作用，但有一个可用的解决方案。

输入 :placeholder-shown。该伪类专门针对空输入字段，允许您应用一旦输入字段包含值就会删除的样式。例如：

input:placeholder-shown {
    border: 1px solid red; /* Red border only if the input is empty */
}

需要注意的是，必须在 HTML 中设置 placeholder 属性，才能使 :placeholder-shown 选择器正常工作。此外，Chrome 要求至少有一个空格字符作为占位符值。

确保包含带有空格的占位符属性，如下所示：

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

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