Necesito ayuda para agregar un estilo css a un componente sin usar javascript

[Razzari]

Hola tengo el siguiente input :



su html es el siguiente:



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



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



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

Código [Seleccionar] Expandir

color: red; y sacar esas clases poner el signo de admiracion

Código [Seleccionar] Expandir

color: transparent;

Desde ya gracias y saludos

[ThinkByYourself]

¿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

[Razzari]

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

Código [Seleccionar] Expandir

form :not (.ng-invalid) .miIcono {
color: red;}

pero no me esta funcionando  

[ThinkByYourself]

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:

Código (css) [Seleccionar] Expandir

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


Creo, vaya

[Razzari]

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 

[Razzari]

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:

Código [Seleccionar] Expandir


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

[ThinkByYourself]

Guay! No hay de qué