How to remove the outline mat-form-filed border co

问题:

I am using the angular material outline mat-form-field to design a form. I am getting the default mat-form-field outline text-box view with a border corner radius. Is there any way to remove the border corner radius of the outline mat-form-field and convert into a square text box view.

I tried to change the default styles of the angular material mat-form-field with the following, but it's not working.

//css

.mat-form-field-appearance-outline .mat-form-field-outline-start 
.alignment{
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}

//html

<mat-form-field appearance="outline" [hideRequiredMarker]="true" 
class="alignment">
<mat-label>Email Address</mat-label>
<input type="text" matInput placeholder="Enter email address">
</mat-form-field>

I expect the outline mat-form-field with no border corner radius text box just like a square text box mat-form-field, but getting the default outline mat-form-field view.

回答1:

Material v7.3.4

.mat-form-field-outline-start, .mat-form-field-outline-end {
    border-radius: 0 !important;
}

回答2:

This is how i removed border radius.

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0px !important;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 0px !important;
}

回答3:

This will remove the border-radius

.alignment .mat-form-field-outline-start,
.alignment .mat-form-field-outline-end {
    border-radius: 0px !important;
}

but you'll need to put it in your top-level stylesheet (e.g. styles.css), the one that is added in angular.json, in order to override the Angular Material component styling.

回答4:

My solution was very similar to other answers but I really don't like using !important, so I did the following (Material 9.1.0):

.mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-start,
.mat-form-field-appearance-outline .mat-form-field-outline .mat-form-field-outline-end {
  border-radius: 0;
}