How to move placeholder text few pixels to the right in select?

I’ve been stuck on this for couple of hours trying to:

  1. Move placeholder text (Search) 10 pixels to the right in my select component and
  2. decrease the height of the field (maybe 5px less) but no luck so far.

Can anyone point me in the right direction please? thanks a lot in advance! here’s my code:

LIVE DEMO

<mat-form-field [floatLabel]="'never'">
  <mat-label>Select</mat-label>
  <mat-select disableOptionCentering
    panelClass="my-mat-select-container">
    <mat-option *ngFor="let food of foods" [value]="food.value">
  {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

Answer

Actually, you need to overwrite angular material style classes to achieve custom styling.

I have done a bit here, please put below css classes in styles.scss and see if you get what you are expecting.
Feel free to play with the pixels to adjust labels.

// dropdown label 
.mat-form-field-label {
  padding-left: 10px;
}

// dropdown label 
.mat-form-field-flex {
  padding-top: 6px!important;
}

// dropdown label 
.mat-form-field-appearance-fill .mat-form-field-infix {
    padding-bottom: 6px!important;
}

// dropdown options style
.mat-select-panel .mat-optgroup-label, .mat-select-panel .mat-option {
    height: 38px!important;
}

// dropdown options style
.mat-select-panel .mat-option {
    padding-left: 25px !important;
}

// selected value text style
.mat-select-value-text {
   padding-left: 10px !important;
}

Note: To avoid using import you will have to give more explicit CSS handles. e.g. For below code

<custom-directive>
   <mat-label >Select</mat-label>
</custom-directive>

, you should write css directive as :

custom-directive mat-label {
  // css here
}

You can use inspect element feature of chrome to know correct CSS handlers, below is the example image. Image to detect CSS handles

Stackblitz code : https://stackblitz.com/edit/angular-fjy4y5-r8urqh?file=src/styles.scss

Leave a Reply

Your email address will not be published. Required fields are marked *