您可以利用占位符并使用:

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

这是有可能的，只要有通常的CSS注意事项，并且HTML代码可以修改。如果向元素添加所需的属性，则该元素将根据控件的值是否为空匹配:invalid或:valid。如果元素没有value属性(或者它有value="")，控件的值最初为空，当输入任何字符(甚至空格)时变成非空。

例子:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

伪分类:valid和:invalid只在工作草案级别的CSS文档中定义，但在浏览器中支持相当广泛，除了在IE中，它随IE 10而来。

如果你想让“空”包含的值只由空格组成，你可以添加属性pattern=.*\S.*。

(目前)没有CSS选择器可以直接检测输入控件是否有非空值，所以我们需要像上面描述的那样间接地做这件事。

通常，CSS选择器指的是标记，或者在某些情况下，指的是通过脚本(客户端JavaScript)设置的元素属性，而不是用户操作。例如:empty在标记中匹配元素中的空内容;在这个意义上，所有输入元素都不可避免地为空。选择器[value=""]测试元素在标记中是否具有value属性，并将空字符串作为其值。和:checked和:indeterminate是类似的东西。它们不受实际用户输入的影响。

是的!你可以用简单的基本属性和值选择器来做。

使用空值属性选择器并应用属性 输入(值= ")

input[value=''] {
    background: red;
}

在HTML部分这样做:

<input type="text" name="Example" placeholder="Example" required/>

为了有效，必需的参数将要求它在输入字段中有文本。

实际上有一种不需要JavaScript的方法。

如果你将<input>的required选择器设置为true，你可以用CSS:valid标签检查其中是否有文本。

引用:

MDN文档 CSS技巧

输入{ 背景:红色; } 输入:有效的{ 背景:lightgreen; } <input type="text" required>

<input onkeyup="this.setAttribute('value', this.value);" />

and

input[value=""]

将工作:-)

编辑:http://jsfiddle.net/XwZR2/