Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide ion input validation border in IONIC-3 [duplicate]

Tags:

ionic2

ionic3

Im used ionic 3 , i want to know how to remove validation border color, red and green .

Example line I tried to removed, using this css

.item-inner { border-bottom-color: transparent !important; box-shadow: none !important; }

its not work, that solution is removed every focus line , any one know how to remove only validation color

like image 432
core114 Avatar asked Feb 15 '18 05:02

core114


People also ask

How do you hide ion items?

You can either use *ngIf to completely remove the element. Refer this link. *ngIf is usually the cleanest way to completely remove it from padding, positioning, etc. The overhead isn't very high unless you put it on something with a serious amount of rendering (lots of children).


1 Answers

If you want for all input fields:

You can override the following scss variables which are set by default for android material design:

$text-input-highlight-color-valid:transparent;
$text-input-highlight-color-invalid:transparent;

For individual elements you can have a custom class in your corresponding scss class and then set border-bottom for ng-valid, ng-invalid classes with border-bottom-color.

.my-input.ng-invalid{
   border-bottom-color: transparent;
}
.my-input.ng-valid{
   border-bottom-color: transparent;
}
like image 115
Suraj Rao Avatar answered Nov 23 '22 20:11

Suraj Rao