¿Detecta si una entrada tiene texto usando CSS - en una página que estoy visitando y no controlo?

¿Hay alguna manera de detectar si una entrada tiene o no texto a través de CSS? He intentado usar la :emptypseudo-clase, y he intentado usar [value=""], ninguno de los cuales funcionó. Parece que no puedo encontrar una solución única para esto.

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

Tenga en cuenta: estoy haciendo esto para un estilo "elegante" , que no puede utilizar JavaScript.

También tenga en cuenta que Stylish se usa, del 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 los <input>valores. Ver:

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

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

A menos que sólo se preocupan por el estado inicial, se debe utilizar un userscript o script de Greasemonkey. Afortunadamente esto no es difícil. El siguiente script funcionará en Chrome o Firefox con Greasemonkey o Scriptish instalado, o en cualquier navegador que admita scripts 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 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";
}

Es posible, con las advertencias habituales de CSS y si se puede modificar el código HTML. Si agrega el requiredatributo al elemento, el elemento coincidirá :invalido :validsegún si el valor del control está vacío o no. Si el elemento no tiene ningún valueatributo (o lo tiene value=""), el valor del control está inicialmente vacío y deja de estar vacío cuando se ingresa cualquier carácter (incluso un espacio).

Ejemplo:

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

Los pseudo-clasificados :validy :invalidse definen solo en documentos CSS de nivel Working Draft, pero el soporte está bastante extendido en los navegadores, excepto que en IE, vino con IE 10.

Si desea que los valores de inclusión "vacíos" incluyan solo espacios, puede agregar el atributo pattern=.*\S.*.

No existe (actualmente) un selector CSS para detectar directamente si un control de entrada tiene un valor no vacío, por lo que debemos hacerlo indirectamente, como se describió anteriormente.

En general, los selectores CSS se refieren al marcado o, en algunos casos, a las propiedades de los elementos configurados con secuencias de comandos (JavaScript del lado del cliente), en lugar de las acciones del usuario. Por ejemplo, :emptycoincide con el elemento con contenido vacío en el marcado; Todos los inputelementos están inevitablemente vacíos en este sentido. El selector [value=""]prueba si el elemento tiene el valueatributo en marcado y tiene la cadena vacía como su valor. Y :checkedya :indeterminateson cosas similares. No se ven afectados por la entrada real del usuario.

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

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

y

input[value=""]

trabajará :-)

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

Básicamente, lo que todos buscan 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;}

Puedes usar el placeholdertruco como está escrito arriba sin requiredcampo.

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

Usted puede hacer algo simple sin 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;
}

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

CSS simple:

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

Este código va a aplicar el css dado en la carga de la página si se llena la entrada.

Puede aplicar un estilo input[type=text]diferente dependiendo de si la entrada tiene texto o no al diseñar el marcador de posición. Este no es un estándar oficial en este momento, pero tiene un amplio soporte para el 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;
    }

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

   

Puede aprovechar el marcador de posición y usar:

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

El selector válido hará el truco.

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

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

Truco simple con jQuery y CSS Así:

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

hazlo en la parte HTML así:

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

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

¡Si! puedes hacerlo con un atributo básico simple con selector de valor.

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

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

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