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

Existe-t-il un moyen de détecter si une entrée contient du texte via CSS? J'ai essayé d'utiliser la :emptypseudo-classe, et j'ai essayé d'utiliser [value=""], ni l'une ni l'autre n'a fonctionné. Je n'arrive pas à trouver une solution unique à cela.

J'imagine que cela doit être possible, étant donné que nous avons des pseudo-classes pour :checkedet :indeterminate, qui sont toutes deux un peu similaires.

Remarque: je fais cela pour un style "élégant" , qui ne peut pas utiliser JavaScript.

Notez également que Stylish est utilisé, côté client, sur des pages que l'utilisateur ne contrôle pas.

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:

• La spécification du sélecteur W3C
• Les sélecteurs pris en charge par Mozilla / Firefox
• Tableau de prise en charge de plusieurs navigateurs, CSS3

Le :emptysé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";
}

C'est possible, avec les mises en garde CSS habituelles et si le code HTML peut être modifié. Si vous ajoutez l' requiredattribut à l'élément, alors l'élément correspondra :invalidou :validselon que la valeur du contrôle est vide ou non. Si l'élément n'a pas d' valueattribut (ou s'il en a value=""), la valeur du contrôle est initialement vide et devient non vide lorsqu'un caractère (même un espace) est entré.

Exemple:

<style>
#foo { background: yellow; }
#foo:valid { outline: solid blue 2px; }
#foo:invalid { outline: solid red 2px; }
</style>
<input id=foo required>

Les pseudo-classés :validet :invalidsont définis dans les documents CSS de niveau Working Draft uniquement, mais le support est assez répandu dans les navigateurs, sauf que dans IE, il est venu avec IE 10.

Si vous souhaitez que «vide» inclue des valeurs constituées uniquement d'espaces, vous pouvez ajouter l'attribut pattern=.*\S.*.

Il n'y a (actuellement) pas 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 général, les sélecteurs CSS font référence au balisage ou, dans certains cas, aux propriétés d'élément définies avec le script (JavaScript côté client), plutôt qu'aux actions de l'utilisateur. Par exemple, :emptycorrespond à un élément avec un contenu vide dans le balisage; tous les inputéléments sont inévitablement vides en ce sens. Le sélecteur [value=""]teste si l'élément a l' valueattribut dans le balisage et la chaîne vide comme valeur. Et :checkedet :indeterminatesont des choses similaires. Ils ne sont pas affectés par l'entrée réelle de l'utilisateur.

Vous pouvez utiliser la :placeholder-shownpseudo classe. 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="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

<input onkeyup="this.setAttribute('value', this.value);" />

et

input[value=""]

marchera :-)

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

Fondamentalement, tout le monde recherche:

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;}
}

CSS pur:

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 utiliser l' placeholderastuce comme indiqué ci-dessus sans requiredchamp.

Le problème requiredest que lorsque vous avez écrit quelque chose, puis que vous l'avez supprimé - l'entrée sera désormais 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 required

<input type="text" placeholder="filter here" id="mytest" />

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;
}

Stylo code: https://codepen.io/arlevi/pen/LBgXjZ

CSS simple:

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

Ce code va appliquer le css donné au chargement de la page si l'entrée est remplie.

Vous pouvez input[type=text]styliser différemment selon que l'entrée contient du texte ou non en stylisant l'espace réservé. Ce n'est pas une norme officielle à ce stade, mais il prend en charge un large navigateur, bien qu'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

Utilisation de JS et CSS: pas de pseudoclasse

 input {
        font-size: 13px;
        padding: 5px;
        width: 100px;
    }

    input[value=""] {
        border: 2px solid #fa0000;
    }

    input:not([value=""]) {
        border: 2px solid #fafa00;
    }

<input type="text" onkeyup="this.setAttribute('value', this.value);" value="" />

   

Vous pouvez profiter de l'espace réservé et utiliser:

input:not(:placeholder-shown) {
  border: 1px solid red;
}

Le sélecteur valide fera l'affaire.

<input type="text" class="myText" required="required" />

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

Astuce simple avec jQuery et CSS Comme ceci:

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;
    }

faites-le sur la partie HTML comme ceci:

<input type="text" name="Example" placeholder="Example" required/>

Le paramètre requis exigera qu'il contienne du texte dans le champ de saisie pour être valide.

Oui! vous pouvez le faire avec un attribut de base simple avec un sélecteur de valeur.

Utiliser le sélecteur d'attribut avec une valeur vide et appliquer des propriétés input[value='']

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

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