ionic2 remove blue line color input md

Question

How can I remove the default line below the text input md.

I already tried all of these below, but the "default" styling still keeps this line.

$text-input-md-highlight-color: "transparent";
$text-input-md-highlight-color-invalid : "transparent";
$text-input-md-highlight-color-valid : "transparent";
$text-input-md-background-color : "transparent";
$text-input-md-show-focus-highlight : "transparent";
$text-input-md-show-invalid-highlight: "transparent";
$text-input-md-show-valid-highlight : "transparent";
$text-input-md-show-success-highlight:      false;
$text-input-md-show-error-highlight:        false;
// Input highlight - normal
$text-input-md-highlight-color:             "transparent";

// Input highlight - valid
$text-input-md-hightlight-color-valid:      "transparent";

// Input highlight - invalid
$text-input-md-hightlight-color-invalid:    "transparent";

Answer 1

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;

Answer 2

Previous version of ionic have a attribute no-lines Which is now depricated

So for the latest version you should use the property ---> lines="none"

Example :

 <ion-item class="textArea" lines="none">
    <ion-textarea autoGrow="true" placeholder="Enter more information here..."></ion-textarea>
  </ion-item>

This will remove the blue line. Hope this will help you or somebody else!