Hide ion-input validation border


#1

Is there a way to disable or hide the validation border(black/red/green) that appears around input boxes? i.e. I have a password input and when the user clicks on it, I see a black bottom border and when they leave it turns red. Once they enter something it turns green. After inspecting the element, I see a box-shadow is getting applied. I’d rather not show these lines and control the validation interaction in a different way.

Thanks for any help!


#2

You can use custom css for this.
If you modify these scss variables, you can customize the color used, even setting them to just a transparent color


#3

Bingo! Thanks!

I also added the following to cover android:
$text-input-md-show-focus-highlight: false !default;
$text-input-md-show-valid-highlight: $text-input-md-show-focus-highlight !default;
$text-input-md-show-invalid-highlight: $text-input-md-show-focus-highlight !default;


#4

This indeed does work for android but using that, every higlight is didabled. How can i disable the focus highlight only on one page?


#5

I would also like the ability to do it per input/page.


#6

The HTML template:

<ion-textarea class="no-validation-line">
...
</ion-textarea>

the SCSS:

.no-validation-line .item-inner {
  box-shadow: none !important;
}

#7

Applied individually

IOS

 .label-ios + ion-input .text-input, .label-ios + ion-textarea .text-input, .label-ios + .input {
         border: none !important;
         margin-left: 5px !important;
     }

ANDROID


     .label-md + ion-input .text-input, .label-md + ion-textarea .text-input, .label-ios + .input {
        border: none !important;
        margin-left: 5px !important;