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
?
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>
Original:
Essayez css:
::ng-deep .mat-input-underline {
display: none;
}
Cela a fonctionné pour moi:
::ng-deep .mat-form-field-underline {
display: none;
}
Ajoutez-le au fichier scss ou css du composant
Les autres réponses n'ont pas fonctionné pour moi, mais cela a fonctionné:
md-input-container input {
border: none;
}
::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
Si vous utilisez mat-form-field
au lieu de md-input-container
et google-landed ici, voici vos deux options.
mat-form-field
et utilisez vos propres styles.mat-form-field
dans la documentation .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;
}