web-dev-qa-db-fra.com

Comment masquer/supprimer le soulignement du matériau angulaire?

J'ai un élément d'entrée dans le matériau angulaire:

<md-input-container>
<input type="text" mdInput placeholder="">
</md-input-container>

Lorsque l'entrée a le focus, elle est soulignée. Comment cacher ou enlever ça?

Il me semble que je dois définir null pour underlineRef?

angularangular-material2
7
Daniel

Mettre à jour:

Importer MdInputDirective

import {MdInputDirective} from '@angular/material';

En compoent faire ce qui suit:

@ViewChild('input') input: MdInputDirective;

ngOnInit(){
  this.input.underlineRef.nativeElement.className = null;
}

En html, ajoutez la référence #input:

<md-input-container #input>
  <input  mdInput placeholder="Last 4 SSN">
</md-input-container>

Démo Plunker

Original:

Essayez css:

::ng-deep .mat-input-underline {
    display: none;
}

démo

15
Nehal

Cela a fonctionné pour moi:

::ng-deep .mat-form-field-underline {
    display: none;
}

Ajoutez-le au fichier scss ou css du composant

12
Paul Lockwood

Les autres réponses n'ont pas fonctionné pour moi, mais cela a fonctionné:

md-input-container input {
        border: none;
}
1
sdg91

::ng-deep .mat-form-field-underline {
  display: none;
}

le code ci-dessus supprimera le soulignement noir par défaut

::ng-deep .mat-form-field-ripple {
  display: none;
}

cela supprimera l'effet d'entraînement sur la mise au point 

1
Naresh Chennuri

Si vous utilisez mat-form-field au lieu de md-input-container et google-landed ici, voici vos deux options.

  1. Mettez en commentaire le mat-form-field et utilisez vos propres styles.
  2. Voir les autres options d'apparence disponibles pour mat-form-field dans la documentation .
0
KrIsHnA

Pour moi, cela a fonctionné sans ::ng-deep. En utilisant 6.1.10 angulaire comme suit:

<form>
  <mat-form-field class="no-line">
    <input type="text"
                  matInput
                  field="label"
                  [matAutocomplete]="auto"
                  [formControl]="formControl"/>
    <mat-autocomplete #auto="matAutocomplete">
        <mat-option *ngFor="let food of foods" [value]="food.value">
          {{ food.label}}
        </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

.no-line .mat-form-field-underline {
  display: none;
}
0
knnhcn