para - lista de codigos css

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

Question

¿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.

Answer 1

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

Answer 2

Css simple:

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

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

Answer 3

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
}

Answer 4

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:

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

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.

Answer 5

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

Answer 6

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

Answer 7

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

<input placeholder="Text is required" />
<input placeholder=" " value="This one is valid" />
<input placeholder=" " />

Answer 8

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

Answer 9

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="" />

   

Answer 10

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.

Answer 11

Elegante no puede hacer esto porque CSS no puede hacer esto. CSS no tiene (pseudo) selectores para <input> 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 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";
}

Answer 12

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

y

input[value=""]

trabajará :-)

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