how to set position of placeholder in mat-input

Question

I'm changing some styles in my mat-input. I got all of them but the position of the placeholder inside the input.

<mat-form-field>
   <input matInput type="email" name="email" [required]="true" placeholder="email" class="my-class"/>
</mat-form-field>

.my-class {
  padding: 10px;
  box-sizing: border-box;
}

This works fine when there is an email inside the input, but when it's empty the placeholder "email" moves inside the input and it's on the top corner.

By checking css, I discover than a class is added and deleted in mat-form-field, it's "mat-form-field-sould-float", my selector will be something like:

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder

but I'm not able to make it work.

How can I change it?

Unknown Unknown · Accepted Answer · 2018-06-04T06:45:36

Because of the view encapsulation, you won't be able to change the CSS of your input in your component's style sheet.

You will have to change style.scss at the root of your project. You can use the same selector :

mat-form-field:not(.mat-form-field-should-float) .mat-input-placeholder {
  padding: 10px;
  box-sizing: border-box;
}

how to set position of placeholder in mat-input

1 Answers