web-dev-qa-db-fra.com

ionic2 supprimer l'entrée de couleur de ligne bleue md

Comment puis-je supprimer la ligne par défaut sous la saisie de texte md.

J'ai déjà essayé tout cela ci-dessous, mais le style "par défaut" conserve toujours cette ligne.

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";
ionic-frameworkionic2material-design
12
Isabelle

essayez d'utiliser le code suivant:

.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;
}

cela supprimera toutes les lignes de validation (rouge/vert/bleu).

ÉDITER

Il existe une meilleure façon de procéder en utilisant le thème.

Accédez à votre theme.scss fichier à l'intérieur src/theme et utilisez ce 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;
40
Gabriel Barreto

Voici une autre version, sans !imporant mot-clé:

 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;
              }
            }
          }
        }
      }
2
Arsen Khachaturyan