角度材质自动完成圆角

Question

我正在使用 Angular Material Autocomplete 进行搜索。我想将角格式化为看起来更圆，但是我遇到了一些问题。前两张图片是我想要的，后两张图片是我的尝试。我的主要样式表是 scss，但如果帮助是纯 css，我会很乐意接受。我可以毫无问题地转换以适应 scss

这是我的 HTML

<div class="main-search">
    <form>
        <mat-form-field appearance="fill">
          <span class="input-min-text">Lookup Address</span>
          <input type="text" placeholder="Search"
            aria-label="Begin your search" matInput [formControl]="ResultsCtrl" [matAutocomplete]="auto"
            [(ngModel)]="searchInput">
          <!-- show this button only if the search box is empty -->
          <button *ngIf='!searchInput' matSuffix mat-icon-button aria-label="Search" class="button-1"><img
              src="../assets/icons/magnifying-glass-solid.svg" /></button>
          <!-- show this button only if the search box is not empty -->
          <button *ngIf='searchInput' matSuffix mat-icon-button aria-label="Clear" class="button-2"
            (click)="clearSearch()"><img src="../assets/icons/xmark-solid.svg" /></button>
          <mat-autocomplete #auto="matAutocomplete">
            <label class="results-heading">Results</label>
            <mat-option *ngFor="let results of filteredResults | async" [value]="results.add">
              <div>
                <span class="min-text">{{results.name}}</span>
                <span class="medium-text">{{results.add}}</span>
                <span class="min-text">{{locaresultstion.barcode}}</span>
              </div>
            </mat-option>
            <p class="min-grey-text">Additional text</p>
          </mat-autocomplete>
    
        </mat-form-field>
      </form>
    </div>

这是我的 SCSS

@import "../../css/styles.scss";

// search box

.main-search {
    // background-color: $white;
    // border-radius: 34px;
}
.mat-form-field {
    width: 560px;
    height: 68px;
    // border:none;
    // margin-left:20px;
    // margin-top: 5px;
    font-size: 1rem;
    background-color: $white;
    border-radius: 34px;
    box-shadow: 0px 3px 6px #00000012;
    border: 1px solid #e8e8e8;
}

::ng-deep .mat-form-field-appearance-fill .mat-form-field-flex {
    background-color: $white;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: unset !important;
    padding: 2px 20px !important;
    border-radius: 34px !important;
}

::ng-deep .mat-input-element.ng-dirty,
.mat-input-element.ng-touched {
    border-bottom: unset !important;
}

::ng-deep .mat-autocomplete-panel {
    border-bottom-left-radius: 34px !important;
    border-bottom-right-radius: 34px !important;
}


.input-min-text {
    color: $black;
    font-size: 0.625rem;
    color: #000000;
    font-size: 0.625rem;
    line-height: 9px;
}

.mat-input-element {
    color: $black !important;
}

.mat-option {
    height: 85px !important;
    color: $black;
    // padding:0px 20px 0px 20px !important;

    span {
        display: block;
        line-height: 22px;
        &:hover,
        &:focus {
            background: $light-yellow;
        }
    }

    &:after {
        content: "";
        width: 20px;
        height: 20px;
        // background-image: url("../../assets/icons/arrow-right-solid.svg");
        background-image: url("../../assets/icons/arrow-right-solid.svg");
        background-repeat: no-repeat;
    }
}

.mat-option:hover:not(.mat-option-disabled),
.mat-option:focus:not(.mat-option-disabled) {
    // background-color: $white;
    background: $light-yellow;
}

.mat-option-text:hover {
    background: $light-yellow;
}

.min-text {
    font-size: 0.75rem;
}

.medium-text {
    font-weight: 500;
}
.min-grey-text {
    color: $grey-2;
    font-size: 0.625rem;
    margin: 24px 0px 0px 15px;
}

.navigation-arrow {
    img {
        width: 5%;
    }
}

.results-heading {
    font-size: 0.625rem;
    margin: 24px 0px 0px 15px;
    color: $black;
}

.mat-input-element {
    caret-color: $grey !important;
}

.mat-form-field-appearance-fill .mat-form-field-flex {
    // background-color: $white;
    // padding: 14px 14px 14px 14px !important;
}

.mat-form-field-flex {
    display: flex !important;
    align-items: center !important;
}

.mat-autocomplete-panel {
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.cdk-overlay-container::-webkit-scrollbar {
    display: none !important;
}
/* Hide scrollbar for IE, Edge add Firefox */
.cdk-overlay-container {
    -ms-overflow-style: none;
    scrollbar-width: none; /* Firefox */
}

.cdk-overlay-container,
.cdk-overlay-pane {
    z-index: 9999 !important;
    // position: absolute !important;
    background-color: $white;
    border-bottom-left-radius: 34px !important;
    border-bottom-right-radius: 34px !important;
}

.cdk-overlay-pane {
    min-width: 632px;
    top: -384.75px !important;
    left: 404px !important;
}

.mat-input-element.ng-dirty,
.mat-input-element.ng-touched {
    border-bottom: 1px solid $light-grey;
}

@media (max-width: 768px) {
    .main-bg {
        background-image: url("../../assets/images/street-bg-small.png");
    }

    .services-offered {
        .service-card {
            flex-direction: column;
        }
    }
}

Answer 1

<mat-form-field appearance="fill">

致：

<mat-form-field appearance="outline">

Answer 2

你有达到你想要的结果吗？如果你这样做了，你能发布你是如何做到的吗？

（无法评论，因为需要 50 声望所以发帖）