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 color: red; y sacar esas clases poner el signo de admiracion color: transparent;
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
form :not (.ng-invalid) .miIcono {
color: red;}
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:
.ion-information-circled{
color:transparent; /*Color por defecto*/
}
form.ng-submitted.ng-invalid .ion-information-circled{
color : red; /*Color en caso de required*/
}
Muchas gracias por el interés y la ayuda NoBullshit ! ;-)
Guay! No hay de qué