Foro de elhacker.net

Hola tengo el siguiente input :

(http://s2.subirimagenes.com/imagen/previo/thump_9705733normal-required.png)

su html es el siguiente:

(http://s2.subirimagenes.com/imagen/previo/thump_9705736html.png)

al dar submit y el campo estar vacio veran que la linea de abajo se pone roja :

(http://s2.subirimagenes.com/imagen/previo/thump_9705737requires-error.png)

el css que tengo para pintar esa linea de rojo es la siguiente:

(http://s2.subirimagenes.com/imagen/previo/thump_9705738css.png)

ahora mi duda es si de alguna milagrosa manera sin usar javascript podria que al agregar el css a la linea ponerle al signo de admiracio y sacar esas clases poner el signo de admiracion
Desde ya gracias y saludos

¿Sin javascript? No entiendo mucho qué quieres hacer, a lo mejor con reglas CSS puedes hacerlo, pero nu he entendiu. Pero sin js............. E-difisi

si, estoy viendo varias pseudo clases de css por ejemplo ":not"
al no estar completos los campos requerido en mi etiqueta form se agrega una clase llamada "ng-invalid"
en css quiero preguntar lo siguiente


pero no me esta funcionando  :(

Ah vale.

En tal caso, ten en cuenta que el orden de las reglas que apliques es importante.

Si pones:

form.formulario.ng-invalid {color:blue}

Y luego:

form.formulario {color:red}

El color será rojo, y azul al ser invalido. El orden podría influir.

Bueno, no es un muy buen ejemplo, pero el orden es importante, vaya


Para el caso:

Primero que la regla ataque al form normal y luego al invalidado, para que el invaludado sobreescriba a la otra, y no sea al revés. No sé si irá por ahí.

O sea:

form .miIcono {color:black}
form.ng-invalid .miIcono {color: red;}
 

Creo, vaya

eso mismo estaba trantanto,, y no funcionaba me fije en al consola de desarrollador y cunado se inicia de entrada el form tiene la clase ng-invalid  :-( :-(

pude solucionarlo,, viendo el comportamiento de las clases a medida que trabajaba con el elemento vi que estas dos clases solo estaban juntas cuando el campo estaba en estado "required" : .ng-submitted.ng-invalid

asi que solo tuve que poner lo siguiente en css:


Muchas gracias por el interés y la ayuda NoBullshit !   ;-)

Guay! No hay de qué