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

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

您可以使用:占位符显示的伪类。从技术上讲，占位符是必需的，但您可以使用空格代替。

输入:没有(placeholder-shown) { 边框颜色:绿色; } 输入:placeholder-shown { 边框颜色:红色; } <input placeholder="Text is required" /> <input placeholder=" " value="This one is valid" /> <input placeholder=" " /> .

这在css中是不可能的。要实现这一点，你必须使用JavaScript(例如$("#input").val() == "")。

使用属性占位符和伪类占位符-显示是检测输入是否有文本的正确方法。

例子:

<input type="email" placeholder=" " required>
<label>Email</label>

input:focus ~ label,
input:not(:placeholder-shown) ~ label
{
  top : -4em
  left : -0.2em
  font-size : 0.9em
}

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

and

input[value=""]

将工作:-)

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

你可以根据输入[type=text]是否有文本来样式化占位符。这不是一个官方标准，但有广泛的浏览器支持，尽管有不同的前缀:

input[type=text] {
    color: red;
}
input[type=text]:-moz-placeholder {
    color: green;
}
input[type=text]::-moz-placeholder {
    color: green;
}
input[type=text]:-ms-input-placeholder {
    color: green;
}
input[type=text]::-webkit-input-placeholder {
    color: green;
}

例如:http://fiddlesalad.com/scss/input-placeholder-css