使用CSS检测输入中是否包含文本-我正在访问的页面上不受控制吗？

Question

是否可以通过CSS检测输入中是否包含文本？我试过使用:empty伪类，并且试过使用[value=""]，这两种都不起作用。我似乎找不到单个解决方案。

考虑到我们有:checked和和的伪类，我想这一定是有可能的，:indeterminate两者都是相似的。

请注意： 我这样做是为了实现“时尚”风格 ，无法使用JavaScript。

另请注意，在用户无法控制的页面上，客户端使用了时尚样式。

Answer 1

时尚 无法做到这一点，因为CSS无法做到这一点。 CSS没有（伪）<input>值选择器。看到：

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

在:empty选择仅指子节点，而不是输入值。
[value=""] 确实 有效；但仅适用于 初始 状态。这是因为节点的value 属性 （CSS可以看到）与节点的value
属性 （由用户或DOM javascript更改，并作为表单数据提交）不同。

除非你只关心初始状态， 你 必须 使用一个userscript或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";
}