ページを制御できませんが、入力に CSS 経由でテキストが含まれているかどうかを検出します

Question

CSS を通じて入力ボックスにテキストがあるかどうかを検出する方法はありますか? :empty 疑似クラスと [value=""] を使用してみましたが、成功しませんでした。解決策が見つからないようです。

似たような :checked や :indeterminate のような疑似クラスがあることを考えると、それは可能なはずだと思います。

注意してください: これは「スタイリッシュ」スタイルのために行っている ため、JavaScript は使用できません。

Stylish は、クライアント側でユーザーが制御できないページで使用されることにも注意してください。

Answer 1

:placeholder-shown 疑似クラスを使用できます。技術的にはプレースホルダーが必要ですが、代わりにスペースを使用できます。

リーリー リーリー

Answer 2

スタイリッシュCSS では実現できないため、これはできません。 CSS には、<input> 値に対する (疑似) セレクターがありません。 ＃＃＃見る：＃＃＃

W3C セレクター仕様
Mozilla/Firefox でサポートされるセレクター
クロスブラウザー、CSS3 サポート表

:empty

セレクターは子ノードにのみ適用され、入力値には適用されません。 [value=""]
は 動作しますが、初期 状態に限ります。これは、CSS によって表示されるノードの valueproperty が、ノードの valueproperty (ユーザーまたは DOM JavaScript によって変更される) と異なるためです。フォームデータとして送信されます）。 初期状態のみを気にする場合を除き、

ユーザー スクリプトまたは Greasemonkey スクリプトを

使用する必要があります。 幸いなことに、これは難しいことではありません。次のスクリプトは、Chrome、Greasemonkey または Scriptish がインストールされている Firefox、またはユーザー スクリプトをサポートするブラウザ (つまり、IE を除くほとんどのブラウザ) で動作します。 CSS の制限と JavaScript ソリューションのデモについては、

この jsBin ページ

をご覧ください。 リーリー