带边框半径的垫形字段轮廓问题渲染

Question

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

我的 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;
}

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

Answer 1

聚会有点晚了，但我想我可能有更好的解决方案:)

当您查看 Material CSS 时，您会发现轮廓的末尾部分是唯一的，flex-grow:1因此它占据了 3 个部分中最多的空间。

我的第一次尝试是为开始部分提供相同的道具，然后我得到的输入看起来像是由 2 个几乎完整的圆圈组成，如下所示。

然后我查看了 Material 最初如何定义其轮廓边框半径，发现它们在各个部分之间有所不同 - 一开始他们使用 0 表示顶部和右下角，使用 5px 表示顶部和左下角，而在结束部分是相反。

所以我相应地改变了定义，现在它工作得很好。

• 我还在 html 中添加了一个特定的类，这样::ng-deep就不会影响应用程序中所有 mat-form-field 的使用。

html:

<div style="padding: 20%">

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

CSS：

::ng-deep .mat-form-field.mat-form-round {
  .mat-form-field-outline {
    &-end {
      border-radius: 0 30px 30px 0 !important;
    }

    &-start {
      border-radius: 30px 0 0 30px !important;
      flex-grow: 1;
    }
  }
}

这是完整的 stackblitz 示例：

https://stackblitz.com/edit/angular-9-material-starter-zw4fbx?file=src/app/app.component.scss