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:


<mat-form-field [floatLabel]="'never'">
  <mat-select disableOptionCentering
    <mat-option *ngFor="let food of foods" [value]="food.value">


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

   <mat-label >Select</mat-label>

, 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 :

Leave a Reply

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