[解決済み】CSSを使用して入力にテキストがあるかどうかを検出する -- 私が訪問しているページで、制御していないのですか？

質問

入力にテキストがあるかどうかをCSSで検出する方法はありますか？私は :empty 擬似クラス、および [value=""] どちらもうまくいきませんでした。これに対する解決策が一つも見つからないようです。

の擬似クラスがあることを考えると、これは可能であるに違いないと想像しています。 :checked と :indeterminate どちらも似たようなものです。

ご注意ください。 私はこれを"Stylish"スタイルのために行っています。 JavaScriptを利用することができません。

また、Stylish は、ユーザーがコントロールしないページで、クライアントサイドで使用されることにも注意してください。

どのように解決するのですか？

スタイリッシュ は、CSSではできないので、このようなことはできません。 CSSには、以下のような（擬似）セレクタがありません。 <input> の値を指定します。 ご覧ください。

• W3Cセレクタの仕様
• Mozilla/Firefox がサポートするセレクタ
• クロスブラウザ、CSS3対応表

は :empty セレクタは子ノードのみを参照し、入力値を参照するものではありません。

[value=""] する が動作します。 初期 の状態になります。 これは、ノードの value 属性 (CSSが見る)ノードと同じではありません。 value プロパティ (ユーザーまたはDOMのjavascriptによって変更され、フォームデータとして送信されます）。

初期状態だけを気にするのでなければ あなた 必ず ユーザースクリプトまたは Greasemonkey スクリプトを使用します。 幸いなことにこれは難しいことではありません。 以下のスクリプトは、Chrome、GreasemonkeyやScriptishをインストールしたFirefox、またはユーザースクリプトをサポートしているブラウザ（つまりIEを除くほとんどのブラウザ）で動作します。

CSSの限界とjavascriptによる解決策のデモは、以下をご覧ください。 このjsBinのページ .

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