Die Seite kann nicht gesteuert werden, aber über CSS wird erkannt, ob die Eingabe Text enthält

Question

Gibt es eine Möglichkeit, über CSS zu erkennen, ob das Eingabefeld Text enthält? Ich habe versucht, die Pseudoklasse :empty und [value=""] zu verwenden. Ich kann anscheinend keine Lösung finden.

Ich denke, es muss möglich sein, wenn man bedenkt, dass wir Pseudoklassen wie :checked haben, die ähnliche Dinge sind.

Bitte beachten Sie: Ich mache dies für einen „stilvollen“ Stil und kann kein JavaScript verwenden.

Beachten Sie außerdem, dass Stylish auf Seiten verwendet wird, über die der Benutzer keine Kontrolle hat, also auf der Clientseite.

Answer 1

您可以使用:placeholder-shown伪类。技术上来说，需要一个占位符，但您可以使用一个空格代替。

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="需要文本" />
<input placeholder=" " value="这个有效" />
<input placeholder=" " />

Answer 2

Stylish无法做到这一点，因为CSS无法实现这一点。CSS没有（伪）选择器适用于<input>值。请参阅：

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

:empty选择器仅适用于子节点，而不适用于输入值。
[value=""]可以工作；但仅适用于初始状态。这是因为CSS所看到的节点的value属性与节点的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";
}