Détecter si une entrée contient du texte en utilisant CSS – sur une page que je visite et ne contrôle pas?

Stylish ne peut pas faire cela car CSS ne peut pas faire cela. CSS n’a pas de (pseudo) sélecteur pour valeurs . Voir:

• Le sélecteur W3C spec
• Les sélecteurs compatibles Mozilla / Firefox
• Navigateur croisé, table de support CSS3

Le sélecteur :empty fait uniquement référence aux nœuds enfants, pas aux valeurs d’entrée.
[value=""] fonctionne mais seulement pour l’état initial . Cela est dû au fait que l’ atsortingbut value un noeud (que CSS voit) n’est pas identique à la propriété value du noeud (modifié par l’utilisateur ou JavaScript DOM et soumis en tant que données de formulaire).

Sauf si vous ne vous souciez que de l’état initial, vous devez utiliser un script 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 utilisateurs (à savoir la plupart des navigateurs, sauf IE).

Voir une démonstration des limites de CSS plus 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"; } 

C’est possible, avec les mises en garde CSS habituelles et si le code HTML peut être modifié. Si vous ajoutez l’atsortingbut required à l’élément, alors l’élément correspondra :invalid ou :valid selon que la valeur du contrôle est vide ou non. Si l’élément n’a pas d’atsortingbut de value (ou s’il a value="" ), la valeur du contrôle est initialement vide et devient vide lorsque n’importe quel caractère (même un espace) est entré.

Exemple:

Le pseudo-classe :valid et :invalid sont définis dans les documents CSS de niveau de travail seulement, mais le support est plutôt répandu dans les navigateurs, sauf que dans IE, il est venu avec IE 10.

Si vous souhaitez que «empty» inclue des valeurs composées uniquement d’espaces, vous pouvez append le pattern=.*\S.* atsortingbut pattern=.*\S.* .

Il n’y a pas (actuellement) de sélecteur CSS pour détecter directement si un contrôle d’entrée a une valeur non vide, nous devons donc le faire indirectement, comme décrit ci-dessus.

En règle générale, les sélecteurs CSS font référence au balisage ou, dans certains cas, aux propriétés des éléments définies avec les scripts (JavaScript côté client), plutôt que les actions utilisateur. Par exemple :empty correspond à un élément avec un contenu vide dans le balisage; tous input éléments d’ input sont inévitablement vides dans ce sens. Le sélecteur [value=""] teste si l’élément a l’atsortingbut value dans le balisage et a pour valeur la chaîne vide. Et :checked et :indeterminate sont des choses similaires. Ils ne sont pas affectés par la saisie de l’utilisateur.

Vous pouvez utiliser la pseudo-classe :placeholder-shown . Techniquement, un espace réservé est requirejs, mais vous pouvez utiliser un espace à la place.

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

et

 input[value=""] 

marchera 🙂

modifier: http://jsfiddle.net/XwZR2/

Fondamentalement, ce que tout le monde recherche est:

MOINS:

 input:focus:required{ &:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;} &:valid, &:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;} } 

Pure CSS:

 input:focus:required:invalid{ color: red; border-color: red; box-shadow: 0 0 6px red;} input:focus:required:valid, input:focus:required:placeholder-shown{ border-color: green; box-shadow: 0 0 8px green;} 

Vous pouvez donner input[type=text] style différent à l’ input[type=text] selon que l’entrée comporte du texte ou non. Ce n’est pas une norme officielle à ce stade, mais prend en charge de nombreux navigateurs, mais avec des préfixes différents:

 input[type=text] { color: red; } input[type=text]:-moz-placeholder { color: green; } input[type=text]::-moz-placeholder { color: green; } input[type=text]:-ms-input-placeholder { color: green; } input[type=text]::-webkit-input-placeholder { color: green; } 

Exemple: http://fiddlesalad.com/scss/input-placeholder-css

Utiliser JS et CSS: pas de pseudoclass

  input { font-size: 13px; padding: 5px; width: 100px; } input[value=""] { border: 2px solid #fa0000; } input:not([value=""]) { border: 2px solid #fafa00; } 

Css simple:

 input[value]:not([value=""]) 

Ce code va appliquer le css donné si l’entrée est remplie.

faites-le sur la partie HTML comme ceci:

Le paramètre requirejs exigera qu’il ait du texte dans le champ de saisie pour être valide.

Le sélecteur valide fera l’affaire.

  .myText { //default style of input } .myText:valid { //style when input has text } 

Oui! vous pouvez le faire avec l’atsortingbut simple de base avec le sélecteur de valeur.

Utilisez le sélecteur d’atsortingbut avec une valeur vide et appliquez les propriétés input[value='']

 input[value=''] { background: red; } 

Vous pouvez utiliser le truc d’ placeholder comme indiqué ci-dessus sans champ required .

Le problème avec la required est que lorsque vous écrivez quelque chose, puis le supprimez – l’entrée sera maintenant toujours rouge dans le cadre de la spécification HTML5 – alors vous aurez besoin d’un CSS comme écrit ci-dessus pour le corriger / le remplacer.

Vous pouvez simplement faire quelque chose sans

CSS

 #mytest:placeholder-shown { /* if placeholder is shown - meaning - no value in input */ border: black 1px solid; color: black; } #mytest { /* placeholder isn't shown - we have a value in input */ border: red 1px solid; color: red; } 

Code pen: https://codepen.io/arlevi/pen/LBgXjZ

Astuce simple avec jQuery et CSS Comme ça:

JQuery:

 $('input[value=""]').addClass('empty'); $('input').keyup(function(){ if( $(this).val() == ""){ $(this).addClass("empty"); }else{ $(this).removeClass("empty"); } }); 

CSS:

 input.empty:valid{ box-shadow: none; background-image: none; border: 1px solid #000; } input:invalid, input:required { box-shadow: 3px 1px 5px rgba(200, 0, 0, 0.85); border: 1px solid rgb(200,0,0); } input:valid{ box-shadow: none; border: 1px solid #0f0; } 

Ce n’est pas possible avec css. Pour l’implémenter, vous devrez utiliser JavaScript (par exemple, $("#input").val() == "" ).