Question

我正在使用角形材料轮廓垫-表单域设计表单。我正在获取带有边框角半径的默认mat-form-field轮廓文本框视图。有什么方法可以删除轮廓mat-form-field的边界角半径并转换为方形文本框视图。

我尝试使用以下方法更改角度材质的mat-form-field的默认样式，但是它不起作用。

// 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>

我希望没有边框角半径文本框的轮廓垫形式字段，就像方形文本框垫形式字段一样，但是会获得默认的轮廓垫形式字段视图。

Answer 1

我的解决方案与其他答案非常相似，但是我真的不喜欢使用!important，所以我做了以下工作（材料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;
}

Answer 2

这将删除边界半径

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

但是您需要将其放入顶层样式表（例如styles.css）中，该样式表是在angular.json中添加的，以便覆盖Angular Material组件样式。

Answer 3

材料v7.3.4

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

Answer 4

这是我删除边框半径的方法。

::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;
}

Answer 5

删除boder并添加box-shadow：

::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-end {
    border-radius: 50% !important;
    border: none;
    border-left: none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-start {
    border-radius: 1px !important;
    border: none;
    border-right: none;
}
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline-gap {
    border-radius: 1px !important;
    border-bottom: none;
}

::ng-deep.mat-form-field-appearance-outline .mat-form-field-outline {
    box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
    border-radius: 15px;
}

Answer 6

对于 angular mat-card 删除像这样的边框半径，在你的 css 中添加这个

 mat-card{
    border-radius: 0px !important;
    }

您还可以添加类，然后设置该类的样式

Answer 7

我最终使用了以下代码，它对我有用：

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

如何删除轮廓垫形式的边框角半径

7 个答案: