如何删除轮廓垫形式的边界角半径 [英] How to remove the outline mat-form-filed border corner radius
问题描述
我正在使用角形材料轮廓垫-表单域设计表单. 我正在获取带有边框角半径的默认mat-form-field轮廓文本框视图.有什么方法可以删除轮廓mat-form-field的边界角半径并将其转换为方形文本框视图.
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.
我尝试使用以下方法更改角度材质的mat-form-field的默认样式,但是它不起作用.
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.
推荐答案
这是删除边框半径的方法.
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;
}
这篇关于如何删除轮廓垫形式的边界角半径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!