有没有办法通过CSS检测输入是否有文本？我试过使用：空伪类，我尝试使用[value =“”]，这两个都没有工作。我似乎找不到一个单一的解决方案。
我想象这必须是可能的，考虑到我们有伪类：checked，和：indeterminate，这两者都是类似的事情。
请注意：我这样做是一个“时尚”的风格，它不能使用JavaScript。
解决方法
时尚不能这样做，因为CSS不能这样做。 CSS没有用于< input>的(伪)选择器。值。看到：
> The W3C selector spec
> The Mozilla/Firefox supported selectors
> Cross-browser,CSS3 support table
：空选择器仅引用子节点，而不是输入值。
[value =“”]不起作用;但仅用于初始状态。这是因为一个节点的value属性(CSS看到)不同于节点的value属性(由用户或DOM javascript改变，并作为表单数据提交)。
除非你只关心初始状态，否则必须使用userscript或Greasemonkey脚本。幸运的是这不难。以下脚本将在Chrome或安装了Greasemonkey或Scriptish的Firefox或支持脚本的任何浏览器(IE大多数浏览器，IE除外)中工作。
看到CSS的限制的演示和this jsBin page的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",false);
inpsToMonitor[J].addEventListener ("focus",false);
inpsToMonitor[J].addEventListener ("blur",false);
inpsToMonitor[J].addEventListener ("mousedown",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";
}
