Stylish ne peut pas faire cela car CSS ne peut pas le faire. CSS n'a pas de (pseudo) sélecteurs pour les <input>
valeurs. Voir:
Le :empty
sélecteur fait uniquement référence aux nœuds enfants, pas aux valeurs d'entrée.
[value=""]
fait le travail; mais seulement pour l' état initial . C'est parce que l' value
attribut d' un nœud (que CSS voit), n'est pas le même que la value
propriété du nœud (modifié par l'utilisateur ou le javascript DOM, et soumis en tant que données de formulaire).
Sauf si vous vous souciez uniquement de l'état initial, vous devez utiliser un script utilisateur ou un script Greasemonkey. Heureusement, ce n'est pas difficile. Le script suivant fonctionnera dans Chrome, ou Firefox avec Greasemonkey ou Scriptish installé, ou dans tout navigateur prenant en charge les scripts utilisateur (c'est-à-dire la plupart des navigateurs, à l'exception d'IE).
Voir une démo des limites du CSS et de la solution javascript sur cette page 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";
}