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
Try this
.item-has-focus{--highlight-background: #e2e2e2;}
2 Likes