Rileva se un input contiene del testo tramite CSS - su una pagina che sto visitando e non controllo?

C'è un modo per rilevare se un input contiene o meno del testo tramite CSS? Ho provato a usare la :emptypseudo-classe, e ho provato a usare [value=""], nessuno dei quali ha funzionato. Non riesco a trovare un'unica soluzione a questo.

Immagino che questo debba essere possibile, considerando che abbiamo pseudo-classi per :checked, e :indeterminate, entrambe le cose sono un po 'simili.

Nota: lo sto facendo per uno stile "elegante" , che non può utilizzare JavaScript.

Si noti inoltre che Stylish viene utilizzato, sul lato client, nelle pagine che l'utente non controlla.

Stylish non può farlo perché i CSS non possono farlo. CSS non ha selettori (pseudo) per <input>valore / i. Vedere:

• Le specifiche del selettore W3C
• I selettori supportati da Mozilla / Firefox
• Cross-browser, tabella di supporto CSS3

Il :emptyselettore si riferisce solo ai nodi figlio, non ai valori di input.
[value=""] lo fa di lavoro; ma solo per lo stato iniziale . Questo perché l' value attributo di un nodo (che CSS vede) non è uguale alla value proprietà del nodo (modificato dall'utente o javascript DOM e inviato come dati del modulo).

A meno che non vi interessa soltanto lo stato iniziale, si deve utilizzare un userscript o uno script Greasemonkey. Fortunatamente questo non è difficile. Il seguente script funzionerà in Chrome o Firefox con Greasemonkey o Scriptish installati o in qualsiasi browser che supporti gli script utente (ovvero la maggior parte dei browser, tranne IE).

Guarda una demo dei limiti del CSS più la soluzione javascript in questa pagina 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";
}

È possibile, con i soliti avvertimenti CSS e se il codice HTML può essere modificato. Se aggiungi l' requiredattributo all'elemento, l'elemento corrisponderà :invalido in :validbase al fatto che il valore del controllo sia vuoto o meno. Se l'elemento non ha alcun valueattributo (o ha value=""), il valore del controllo è inizialmente vuoto e diventa non vuoto quando viene inserito un carattere (anche uno spazio).

Esempio:

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

Gli pseudo-classificati :valide :invalidsono definiti solo nei documenti CSS a livello di Working Draft, ma il supporto è piuttosto diffuso nei browser, tranne che in IE, è arrivato con IE 10.

Se si desidera rendere "vuoti" includere valori costituiti solo da spazi, è possibile aggiungere l'attributo pattern=.*\S.*.

Non esiste (attualmente) alcun selettore CSS per rilevare direttamente se un controllo di input ha un valore non vuoto, quindi è necessario farlo indirettamente, come descritto sopra.

In genere, i selettori CSS fanno riferimento al markup o, in alcuni casi, alle proprietà degli elementi impostate con lo scripting (JavaScript lato client), piuttosto che con le azioni dell'utente. Ad esempio, :emptyabbina l'elemento con contenuto vuoto nel markup; tutti gli inputelementi sono inevitabilmente vuoti in questo senso. Il selettore [value=""]verifica se l'elemento ha l' valueattributo nel markup e ha la stringa vuota come valore. E :checkede :indeterminatesono cose simili. Non sono interessati dall'effettivo input dell'utente.

Puoi usare la :placeholder-shownpseudo classe. Tecnicamente è richiesto un segnaposto, ma è possibile utilizzare uno spazio.

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);" />

e

input[value=""]

funzionerà :-)

modifica: http://jsfiddle.net/XwZR2/

Fondamentalmente quello che tutti cercano è:

DI MENO:

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 puro:

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

Puoi usare il placeholdertrucco come scritto sopra senzarequired campo.

Il problema con required è che quando hai scritto qualcosa, poi l'hai eliminato - l'input sarà sempre rosso come parte della specifica HTML5 - quindi avrai bisogno di un CSS come scritto sopra per risolverlo / sovrascriverlo.

Puoi fare semplicemente le cose senza 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;
}

Penna codice: https://codepen.io/arlevi/pen/LBgXjZ

CSS semplice:

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

Questo codice applicherà il css dato al caricamento della pagina se l'input è pieno.

È possibile applicare uno stile input[type=text]diverso a seconda che l'input abbia o meno del testo assegnando uno stile al segnaposto. Questo non è uno standard ufficiale a questo punto ma ha un ampio supporto del browser, sebbene con prefissi diversi:

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

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

Utilizzo di JS e CSS: non 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="" />

   

Puoi usufruire del segnaposto e utilizzare:

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

Il selettore valido farà il trucco.

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

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

Trucco semplice con jQuery e CSS In questo modo:

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

fallo sulla parte HTML in questo modo:

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

Il parametro richiesto richiederà di avere del testo nel campo di input per essere valido.

Sì! puoi farlo con un semplice attributo di base con selettore di valore.

Utilizzare il selettore di attributi con valore vuoto e applicare proprietà input[value='']

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

Questo non è possibile con CSS. Per implementarlo dovrai usare JavaScript (es $("#input").val() == "".).