Custom style material input without ng deep/!important/

Issue

I need to customise material input, specifically make it round with border radius. I've found a solution on how to do this by adding a class "custom-search" to the mat-form-field and applying the border radius in the global stlysheet like so

.custom-search .mat-form-field-outline .mat-form-field-outline-start {
  border-radius: 100px 0 0 100px;
  min-width: 100px;
}

.custom-search .mat-form-field-outline .mat-form-field-outline-end {
  border-radius: 0 100px 100px 0;
}

However the background is not rounded, I managed to figure out the css classes that affect the background but changing it changes all the mat-form-fields in the app, and if I add my custom class it doesn't work.

 .mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-wrapper .mat-form-field-flex .mat-form-field-outline {
  border-radius: 100px;
}

I do not want to use deprecated methods such as ng deep, !important, or turning off view encapsulation.

Solution

I feel that there're many ways to get it, and this is not the better way, but in styles.css

.search.mat-form-field-appearance-outline .mat-form-field-outline-start{
  width: 50px;
  border-radius: 50px 0 0 50px;
  background:white
}
.search.mat-form-field-appearance-outline .mat-form-field-outline-end{
  width: 50px;
  border-radius: 0 50px 50px 0;
  background:white;
}
.search.no-label.mat-form-field-appearance-outline .mat-form-field-outline-end
{
  border-radius:50px;
  border-left:1px solid;
  background:white;
}
.search.no-label.mat-focused.mat-form-field-appearance-outline .mat-form-field-outline-end,
.search.no-label.mat-form-field-appearance-outline .mat-form-field-flex:hover .mat-form-field-outline-end
{
  border-left:2px solid;

}

.search.no-label.mat-form-field-appearance-outline .mat-form-field-outline-start,.search.no-label.mat-form-field-appearance-outline .mat-form-field-outline-gap
{
  min-width: 0;
  border:none;
  border-radius:0;
}

.search .mat-form-field-outline-gap{
  background:white
}

//up a bit the input and icon
.search.mat-form-field-appearance-outline .mat-form-field-prefix{
  top:0
}
.search input{
  margin-top: -.25em;
  margin-bottom: .25em;
}
.search .mat-form-field-label
{
  margin-top:-.125em;
}
.search.mat-focused  .mat-form-field-label,
.search .mat-form-field-label:not(.mat-empty)
{
  margin-top:-.25em;
}

See that you use

   //If the formField include a `mat-label`
   <mat-form-field appearance="outline" class="search">
   ...
   </mat-form-field>

   //If the formField NOT include a `mat-label`
   <mat-form-field appearance="outline" class="search no-label">
   ...
   </mat-form-field>

stackblitz

Answered By - Eliseo