样式不能这样做，因为CSS不能这样做。CSS对于<input>值没有(伪)选择器。看到的:

W3C选择器规范 Mozilla/Firefox支持选择器 跨浏览器，支持CSS3表

empty选择器只指向子节点，不指向输入值。 [value=""]有效;但只是初始状态。这是因为节点的value属性(CSS看到的)与节点的value属性(由用户或DOM javascript更改，并作为表单数据提交)不相同。

除非只关心初始状态，否则必须使用用户脚本或Greasemonkey脚本。幸运的是，这并不难。以下脚本将在Chrome，或安装了Greasemonkey或Scriptish的Firefox中工作，或在任何支持用户脚本的浏览器中工作(即大多数浏览器，除了IE)。

在这个jsBin页面上可以看到CSS限制和javascript解决方案的演示。

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}

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

在HTML部分这样做:

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

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

基本上每个人都在寻找的是:

少:

input:focus:required{
    &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
    &:valid,
    &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}
}

纯CSS:

input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;}
input:focus:required:valid,
input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;}

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

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

样式不能这样做，因为CSS不能这样做。CSS对于<input>值没有(伪)选择器。看到的:

W3C选择器规范 Mozilla/Firefox支持选择器 跨浏览器，支持CSS3表

empty选择器只指向子节点，不指向输入值。 [value=""]有效;但只是初始状态。这是因为节点的value属性(CSS看到的)与节点的value属性(由用户或DOM javascript更改，并作为表单数据提交)不相同。

除非只关心初始状态，否则必须使用用户脚本或Greasemonkey脚本。幸运的是，这并不难。以下脚本将在Chrome，或安装了Greasemonkey或Scriptish的Firefox中工作，或在任何支持用户脚本的浏览器中工作(即大多数浏览器，除了IE)。

在这个jsBin页面上可以看到CSS限制和javascript解决方案的演示。

// ==UserScript==
// @name     _Dynamically style inputs based on whether they are blank.
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/

var inpsToMonitor = document.querySelectorAll (
    "form[name='JustCSS'] input[name^='inp']"
);
for (var J = inpsToMonitor.length - 1;  J >= 0;  --J) {
    inpsToMonitor[J].addEventListener ("change",    adjustStyling, false);
    inpsToMonitor[J].addEventListener ("keyup",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("focus",     adjustStyling, false);
    inpsToMonitor[J].addEventListener ("blur",      adjustStyling, false);
    inpsToMonitor[J].addEventListener ("mousedown", adjustStyling, false);

    //-- Initial update. note that IE support is NOT needed.
    var evt = document.createEvent ("HTMLEvents");
    evt.initEvent ("change", false, true);
    inpsToMonitor[J].dispatchEvent (evt);
}

function adjustStyling (zEvent) {
    var inpVal  = zEvent.target.value;
    if (inpVal  &&  inpVal.replace (/^\s+|\s+$/g, "") )
        zEvent.target.style.background = "lime";
    else
        zEvent.target.style.background = "inherit";
}