Rileva se un input contiene del testo usando CSS – su una pagina che visito e non controllo?

C’è un modo per rilevare se un input contiene o meno del testo tramite CSS? Ho provato ad usare la pseudo-class :empty e ho provato a usare [value=""] , nessuno dei due ha funzionato. Non riesco a trovare una soluzione unica a questo.

Immagino che questo sia ansible, considerando che abbiamo pseudo-classi per :checked , e :indeterminate , entrambi sono tipi di cose simili.

Nota: lo sto facendo per uno stile “alla moda” , che non può utilizzare JavaScript.

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

Stylish non può farlo perché i CSS non possono farlo. I CSS non hanno selettori (pseudo) per i valori . Vedere:

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

Il :empty selettore :empty riferisce solo ai nodes figli, non ai valori di input.
[value=""] funziona; ma solo per lo stato iniziale . Questo perché l’ attributo value un nodo (che vede CSS), non è uguale alla proprietà value del nodo (Modificato dall’utente o DOM javascript e inviato come dati del modulo).

A meno che non ti interessi solo sullo stato iniziale, devi utilizzare uno script userscript o Greasemonkey. Fortunatamente questo non è difficile. Il seguente script funzionerà in Chrome, o in Firefox con Greasemonkey o Scriptish installato, o in qualsiasi browser che supporti gli usercripts (cioè la maggior parte dei browser, ad eccezione di IE).

Vedi una demo dei limiti di 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"; } 

È ansible, con i soliti avvertimenti CSS e se il codice HTML può essere modificato. Se si aggiunge l’attributo required all’elemento, l’elemento corrisponderà :invalid o :valid seconda che il valore del controllo sia vuoto o meno. Se l’elemento non ha attributo value (o ha value="" ), il valore del controllo è inizialmente vuoto e diventa non vuoto quando viene immesso qualsiasi carattere (anche uno spazio).

Esempio:

   

La pseudo-class :valid e :invalid sono definiti solo in documenti CSS a livello di bozza di lavoro, ma il supporto è piuttosto diffuso nei browser, tranne che in IE, è incluso in IE 10.

Se vuoi rendere “vuoto” includi valori che consistono solo di spazi, puoi aggiungere l’attributo pattern=.*\S.* .

Esiste (attualmente) nessun selettore CSS per rilevare direttamente se un controllo di input ha un valore non vuoto, quindi dobbiamo farlo indirettamente, come descritto sopra.

Generalmente, i selettori CSS si riferiscono al markup o, in alcuni casi, alle proprietà dell’elemento come impostato con lo scripting (JavaScript sul lato client), piuttosto che le azioni dell’utente. Ad esempio :empty elemento di corrispondenze vuoto con contenuto vuoto nel markup; tutti gli elementi di input sono inevitabilmente vuoti in questo senso. Il selettore [value=""] verifica se l’elemento ha l’attributo value nel markup e ha la stringa vuota come valore. E :checked e :indeterminate sono cose simili. Non sono influenzati dall’effettivo input dell’utente.

Puoi usare la pseudo class :placeholder-shown . Tecnicamente è richiesto un segnaposto, ma è ansible utilizzare uno spazio.

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

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

È ansible input[type=text] stili di input[type=text] diverso a seconda che l’input abbia o meno del testo mediante lo styling del segnaposto. Questo non è uno standard ufficiale a questo punto ma ha un ampio supporto per i browser, sebbene con diversi prefissi:

 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 pseudoclass

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

Css semplice:

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

Questo codice applicherà il css dato se l’input è pieno.

fallo nella parte HTML come questo:

  

Il parametro richiesto richiede che abbia testo nel campo di immissione per essere valido.

Il selezionatore valido farà il trucco.

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

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

Usa il selettore di attributo con valore vuoto e applica proprietà input[value='']

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

Puoi usare il trucco placeholder come scritto sopra senza campo required .

Il problema con la required è che quando hai scritto qualcosa, poi l’hai cancellato – l’input ora sarà sempre rosso come parte della specifica HTML5 – quindi avrai bisogno di un CSS come scritto sopra per correggerlo / sovrascriverlo.

È ansible fare cose semplici senza required

  

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

Codice penna: https://codepen.io/arlevi/pen/LBgXjZ

Semplice trucco con jQuery e CSS Come così:

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

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