相关疑难解决方法(0)

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

我希望轮廓 mat-form-field 没有边框角半径文本框，就像方形文本框 mat-form-field 一样，但获得默认的轮廓 mat-form-field 视图。

我正在尝试使我的输入字段具有圆形轮廓。该字段位于单选按钮中。

我的 HTML 是：

<mat-radio-group aria-label="Select an option">
    <mat-radio-button value="1">
        <form class="example-form">
            <mat-form-field appearance="outline" class="example-full-width">
                <input type="text" placeholder="Input" matInput [formControl]="myControl">
            </mat-form-field>
        </form>
    </mat-radio-button>
    &nbsp;
    <mat-radio-button value="2">All</mat-radio-button>
</mat-radio-group>

CSS：

.example-form {
  min-width: 150px;
  max-width: 500px;
  width: 100%;
}

.example-full-width {
  width: 100%;
}

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

当我更改边框半径以获得所需的轮廓时，结果是：如何删除左侧的线？