css 实现文本框中有值和无值时的样式

• #css

下面这个文本框，当有值时，边框颜色为红色，当没有值时，边框颜色为灰色。

要实现这个功能，早些时候是通过 js 来实现，监听 input 的 change 事件，然后判断是否为空，如果为空，则添加样式，否则移除样式。

css 的 :placeholder-shown 伪类选择器可以更简单的实现这个功能。

<style>
    input {
        outline: none;
        border: 1px solid #666;

        &:not(:placeholder-shown) {
            border: 1px solid red;
        }
    }
</style>
<input type="text" placeholder="请输入内容" />

:placeholder-shown 字面意思是 input 中的 placeholder 文字出现时设置样式，此时 input 中是没有输入值的。:not(:placeholder-shown) 刚好相反，input 中的 placeholder 文字不存在时设置文本框样式，此时 input 中有值。

如果说文本框中不想要显示 placeholder 文字，只需设置 placeholder="" 即可，但还是要有 placeholder 属性的，如下：

↶ 返回首页