Evento para un input box

[turminator]

Hola,

Estoy probando de crear un evento para un input box semejante al que se usa aquí, cuando creamos un nuevo tema y es que salga una modificación visual cuando detecte que hemos introducido texto en el input box.

Inicialmente había pensado en modificar el borde del input box a un color verde pero ahora que veo el que se usa aquó con la típica V de "válido" creo que es más expressivo.

Para hacer el evento con modificación del color del borde, hice este evento:

Código:

form#spEntryForm .input:focus{
  border: 2px solid green;}

Pero solo se muestra verde cuando mantiene el foco, por lo que entiendo que debería usar otro evento que no fuera focus.

Alquien me puede hechar una mano?

Muchas gracias de antemano!

[kseso?]

Primero ¿a su input le declala una clase llamada ".input" de tal forma que su html queda <input class="input"..../> ?
Porque en caso contrario le sobra el . (punto) antes del elemento.

Para midificarlo tiene las pseudoclases "clásicas"

Código CSS:

:hover
    :active
    :focus
    :enabled
    :disabled
    :checked
    :indeterminate
 

a las que puede añadir las nuevas pseudoC de nivel 3 para la UI (interfaz básica de usuario):

Código CSS:

:default
    :valid
    :invalid
    :in-range
    :out-of-range
    :required
    :optional
    :read-only
    :read-write
 

Todo depende de qué tipo de input se trate.
Más info sobre estas últimas.

[turminator]

Hola kseso?,

Gracias por tu mensaje. El input box se trata de un campo (Nombre personal) de un formulario para hacer un alta. Lo que quería es que en cuánto el usuario escrib su nombre apareciese al lado el tipico icono de "Correcto"

Y ahora mismo con el focus, solo se me modificaría cuando tengo el focus en el campo y no cuando está rellenado.

Muchas gracias!

[kseso?]

Bien, si es sólo un efecto visual (no verificación del valor y su tipo) sólo si se ha rellenado el campo aunque sea zzzz optaría por:

Código CSS:

input:not(:empty) {
   /* aquí los estilos */
 }
 

Sabiendo que ie8 e inferiores no lo soportan (hablo de memoria). Verifique cuáles sí y no en www.caniuse.com