Search code examples
ionic-frameworkionic2material-design

ionic2 remove blue line color input md

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.

enter image description here

$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";
Solution

  • 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;