如何删除轮廓 mat-form-filed 边框角半径 [英] How to remove the outline mat-form-filed border corner radius

问题描述

我正在使用有角度的材料轮廓 mat-form-field 来设计表单.我得到了带有边框角半径的默认 mat-form-field 轮廓文本框视图.有什么办法可以去掉outline 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>

我希望轮廓 mat-form-field 没有边框角半径文本框，就像方形文本框 mat-form-field，但获得默认的轮廓 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.

推荐答案

Material v7.3.4

Material v7.3.4

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

这篇关于如何删除轮廓 mat-form-filed 边框角半径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！