Detecta si una entrada tiene texto usando CSS, en una página que estoy visitando y que no controlo.

¿Hay alguna forma de detectar si una entrada tiene texto en CSS o no? Intenté usar la pseudoclase :empty e intenté usar [value=""] , ninguno de los cuales funcionó. Parece que no puedo encontrar una sola solución para esto.

Me imagino que esto debe ser posible, teniendo en cuenta que tenemos pseudo-clases para :checked , y :indeterminate , que son algo similar.

Tenga en cuenta que estoy haciendo esto para un estilo “Elegante” , que no puede utilizar JavaScript.

También tenga en cuenta que Stylish se utiliza, en el lado del cliente, en páginas que el usuario no controla.

Elegante no puede hacer esto porque CSS no puede hacer esto. CSS no tiene (pseudo) selectores para value (s). Ver:

  • La especificación del selector W3C
  • Los selectores compatibles con Mozilla / Firefox
  • Cross-browser, tabla de soporte CSS3

El selector :empty refiere solo a los nodos secundarios, no a los valores de entrada.
[value=""] funciona; pero solo para el estado inicial . Esto se debe a que el atributo de value un nodo (que ve CSS) no es lo mismo que la propiedad de value del nodo (Modificado por el usuario o DOM javascript, y enviado como datos de formulario).

A menos que solo le interese el estado inicial, debe usar un script de usuario o de Greasemonkey. Afortunadamente, esto no es difícil. El siguiente script funcionará en Chrome, Firefox con Greasemonkey o Scriptish instalado, o en cualquier navegador que admita los archivos de usuario (es decir, la mayoría de los navegadores, excepto IE).

Vea una demostración de los límites de CSS más la solución de javascript en esta página 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 restres 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"; } 

Es posible, con las advertencias CSS habituales y si el código HTML se puede modificar. Si agrega el atributo required al elemento, el elemento coincidirá :invalid o :valid acuerdo con si el valor del control está vacío o no. Si el elemento no tiene ningún atributo de value (o tiene value="" ), el valor del control está inicialmente vacío y se convierte en no vacío cuando se ingresa cualquier carácter (incluso un espacio).

Ejemplo:

   

Los pseudoclasificados :valid y :invalid se definen solo en documentos CSS de nivel Working Draft, pero el soporte es bastante amplio en los navegadores, excepto que en IE, vino con IE 10.

Si desea hacer que “vacío” incluya valores que constan solo de espacios, puede agregar el atributo pattern=.*\S.* .

No hay (actualmente) selector de CSS para detectar directamente si un control de entrada tiene un valor no vacío, por lo que debemos hacerlo de forma indirecta, como se describe anteriormente.

En general, los selectores de CSS hacen referencia al marcado o, en algunos casos, a las propiedades del elemento tal como se establece con las secuencias de comandos (JavaScript del lado del cliente), en lugar de las acciones del usuario. Por ejemplo :empty elemento de coincidencias vacías con contenido vacío en el marcado; todos input elementos de input están inevitablemente vacíos en este sentido. El selector [value=""] prueba si el elemento tiene el atributo de value en el marcado y tiene la cadena vacía como su valor. Y :checked y :indeterminate son cosas similares. No se ven afectados por la entrada real del usuario.

Puede usar la :placeholder-shown . Técnicamente se requiere un marcador de posición, pero puede usar un espacio en su lugar.

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

y

 input[value=""] 

trabajará 🙂

editar: http://jsfiddle.net/XwZR2/

Básicamente lo que todo el mundo está buscando es:

MENOS:

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

Puede aplicar el estilo de input[type=text] diferente dependiendo de si la entrada tiene texto mediante el estilo del marcador de posición. Este no es un estándar oficial en este momento, pero tiene un amplio soporte de navegador, aunque con diferentes prefijos:

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

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

Usando JS y CSS: no pseudoclase

  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=""]) 

Este código aplicará el css dado si la entrada está llena.

hazlo en la parte HTML así:

  

El parámetro requerido requerirá que tenga texto en el campo de entrada para que sea válido.

El selector válido hará el truco.

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

¡Sí! puedes hacerlo con un simple atributo básico con selector de valores.

Utilice el selector de atributos con el valor en blanco y aplique las propiedades de input[value='']

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

Puede usar el truco del placeholder como está escrito arriba sin el campo required .

El problema con el required es que cuando escribiste algo, luego lo borraste, la entrada siempre será roja como parte de la especificación de HTML5, entonces necesitarás un CSS como se escribió anteriormente para corregirlo / anularlo.

Usted puede hacer cosas simples sin 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; } 

Pluma de código: https://codepen.io/arlevi/pen/LBgXjZ

Truco simple con jQuery y CSS Al igual que:

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

Esto no es posible con css. Para implementar esto, deberá usar JavaScript (por ejemplo $("#input").val() == "" ).