I am using Angular Material Autocomplete to do my search. I would like to format the corners to look more rounded, however I am having some issues with that. The first 2 pictures are what I'd like it to be and the last 2 pictures are my attempt. My main stylesheet is scss but if the assistance is in plain css, I will gladly accept. I will have no problems transforming to fit scss
This is my 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>
THIS IS MY 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;
}
}
}
To :