無法控制頁面，但透過CSS檢測輸入是否包含文字

Question

有沒有辦法透過CSS來偵測輸入框是否有文字？我嘗試使用:empty偽類和[value=""]，但都沒有成功。我似乎找不到一個解決方案。

我想這一定是可能的，考慮到我們有:checked和:indeterminate這樣的偽類，它們都是類似的東西。

請注意：我是為了一個「Stylish」樣式而做這個，不能使用JavaScript。

也要注意，Stylish是在使用者無法控制的頁面上使用的，客戶端的。

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";
}