ionic2 remove blue line color input md
Here is another version, without !imporant
keyword:
ion-content {
%no-input-border {
border-bottom-color: transparent;
box-shadow: none;
}
ion-item {
&.item-input {
&.item-md {
&.input-has-focus {
.item-inner {
@extend %no-input-border;
}
}
}
&.ng-invalid {
&.item-md {
&.ng-touched:not(.input-has-focus):not(.item-input-has-focus) {
.item-inner {
@extend %no-input-border;
}
}
}
}
&.ng-valid {
&.item-md {
&.input-has-value:not(.input-has-focus):not(.item-input-has-focus) {
.item-inner {
@extend %no-input-border;
}
}
}
}
}
try using the following code:
.item-md.item-input.input-has-focus .item-inner {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.list-md .item-input.input-has-focus:last-child {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.list-md .item-input.input-has-focus:last-child .item-inner {
box-shadow: none;
}
.item-md.item-input.ng-valid.input-has-value:not(.input-has-focus) .item-inner {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.list-md .item-input.ng-valid.input-has-value:not(.input-has-focus):last-child .item-inner {
box-shadow: none;
}
.item-md.item-input.ng-invalid.ng-touched:not(.input-has-focus) .item-inner {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
.list-md .item-input.ng-invalid.ng-touched:not(.input-has-focus):last-child {
border-bottom-color: transparent !important;
box-shadow: none !important;
}
it'll remove all validation lines (red/green/blue).
EDIT
There's a better way for doing this using theming.
Go to your theme.scss
file inside src/theme
and use this code
$text-input-md-highlight-color-invalid: transparent;
$text-input-md-highlight-color-valid: transparent;
$text-input-md-show-invalid-highlight: transparent;
$text-input-md-highlight-color: transparent;
$text-input-md-show-valid-highlight: transparent;