Hide ion-input validation border

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!

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

1 Like

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;

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

1 Like

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

The HTML template:

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

the SCSS:

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

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;
1 Like