Solution 1 :

I’m not sure to understand everything but if you want your label to be always “inside” the top border of your mat-form-field you need to pass a floatLabel="always" to your mat-form-field.
Like this:

    <mat-form-field appearance="outline" floatLabel="always">
        <mat-label> test </mat-label>
        <mat-select placeholder="Favorite food">
            <mat-option *ngFor="let food of foods" [value]="food.value">

And if you want this behaviour to be the default one, you can (as describe in the doc )
add this in your application’s root module.:

  providers: [
    {provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: {floatLabel: 'always'}}

you won’t need to pass floatLabel="always" anymore.

Problem :

I’m trying to create multi-option select input using Angular material.
I want to fix <mat-label> on the border of the input field but now when I clicked on the input field then it is moving on to the border. How to fix this <mat-label> on the input border

My style.css

@import "[email protected]/material/prebuilt-themes/indigo-pink.css";

.mat-select-panel {
  position: absolute;
  top: 32px;
  left: 4px;
  min-width: calc(100% + 22px) !important;
  border-radius: 0px !important;
  border: 1px solid rgb(31, 30, 30);
  border-top-style: none;

.mat-form-field-appearance-outline .mat-form-field-outline-start {
  border-radius: 0px !important;
  border: 1px solid rgb(43, 41, 41) !important;
  border-right-style: none !important;

.mat-form-field-appearance-outline .mat-form-field-outline-end {
  border-radius: 0px !important;
  border: 1px solid rgb(56, 55, 55) !important;
  border-left-style: none !important;

.mat-select-panel ng-animating {
  visibility: hidden;

My StackBlitz Link ->