Impossible de contrôler la page, mais détecter si l'entrée contient du texte via CSS

Question

Existe-t-il un moyen de détecter si la zone de saisie contient du texte via CSS ? J'ai essayé d'utiliser la pseudo-classe :empty et [value=""] Je n'arrive pas à trouver une solution.

Je suppose que cela doit être possible, étant donné que nous avons des pseudo-classes comme :checked et :indeterminate

Veuillez noter : Je fais cela pour un style " élégant » et je ne peux pas utiliser JavaScript.

Notez également que Stylish est utilisé sur les pages sur lesquelles l'utilisateur n'a aucun contrôle, côté client.

Answer 1

Vous pouvez utiliser des :placeholder-shownpseudo-classes. Techniquement, un espace réservé est requis, mais vous pouvez utiliser un espace à la place.

input:not(:placeholder-shown) {
  border-color: green;
}

input:placeholder-shown {
  border-color: red;
}

<input placeholder="需要文本" />
<input placeholder=" " value="这个有效" />
<input placeholder=" " />

Answer 2

Stylish ne peut pas faire cela car CSS ne le permet pas. CSS n'a pas de (pseudo) sélecteurs pour <input> valeurs. Voir :

• Spécifications du sélecteur W3C
• Sélecteurs pris en charge par Mozilla/Firefox
• Cross-navigateur, tables de support CSS3

:emptyLes sélecteurs ne fonctionnent que sur les nœuds enfants, pas sur les valeurs d'entrée.
[value=""][value=""]可以工作；但仅适用于初始状态。这是因为CSS所看到的节点的value属性与节点的value peut fonctionner mais uniquement dans l'état initial

. En effet, la valeur

property du nœud telle que vue par CSS est différente de la valeurproperty du nœud (modifiée par l'utilisateur ou le JavaScript DOM et soumise en tant que données de formulaire) .

À moins que vous ne vous souciez que 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 dans 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 limitations CSS et des solutions 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";
}