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.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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; }Stylishne peut pas faire cela car CSS ne le permet pas.CSS n'a pas de (pseudo) sélecteurs pour
valeurs.Voir :
. En effet, la:emptyLes sélecteurs ne fonctionnent que sur les nœuds enfants, pas sur les valeurs d'entrée.[value=""][value=""]可以工作；但仅适用于初始状态。这是因为CSS所看到的节点的value属性与节点的valuepeutfonctionner mais uniquement dans l'étatinitialvaleurpropertydu nœud telle que vue par CSS est différente de la
À moins que vous ne vous souciez que de l'état initial,valeurpropertydu nœud (modifiée par l'utilisateur ou le JavaScript DOM et soumise en tant que données de formulaire) .vousdevezutiliser 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"; }