Can't control page, but detect if input contains text via CSS
P粉850680329
2023-08-20 18:25:33
<p>Is there a way to detect whether the input box has text through CSS? I tried using the <code>:empty</code> pseudo-class and <code>[value=""]</code> without success. I can't seem to find a solution. </p>
<p>I guess it must be possible, considering we have pseudo-classes like <code>:checked</code> and <code>:indeterminate</code> which are similar things. </p>
<p>Please note: <strong>I am doing this for a "Stylish" style</strong> and cannot use JavaScript. </p>
<p>Also note that Stylish is used on a page that the user has no control over, client-side. </p>
You can use
:placeholder-shown
pseudo-class. Technically, a placeholder is required, but you can use a space instead.StylishCan't do this because CSS doesn't make it possible. CSS has no (pseudo) selectors for
<input>
values. See::empty
The selector only applies to child nodes, not to input values.[value=""]
can work; but only in the initial state. This is because the node'svalue
property seen by CSS is different from the node'svalue
property (changed by the user or DOM JavaScript, and submitted as form data).Unless you only care about the initial state, you must use a user script or a Greasemonkey script. Fortunately, this is not difficult. The following script will work in Chrome, or in Firefox with Greasemonkey or Scriptish installed, or in any browser that supports userscripts (i.e. most browsers, except IE).
See a demonstration of CSS limitations and JavaScript solutions on this jsBin page .