как установить позицию заполнителя в mat-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;
}

Это отлично работает, когда внутри ввода есть электронное письмо, но когда он пуст, заполнитель «электронное письмо» перемещается внутри ввода и находится в верхнем углу.

good positoin плохая позиция

Проверяя css, я обнаруживаю, что класс добавляется и удаляется в поле mat-form-field, это «mat-form-field-sould-float», мой селектор будет примерно таким:

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

но я не могу заставить его работать.

Как я могу это изменить?


angular css angular-material angular-material-5
person cucuru    schedule 04.06.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Из-за инкапсуляции представления вы не сможете изменить CSS своего ввода в таблице стилей вашего компонента.

Вам нужно будет изменить style.scss в корне вашего проекта. Вы можете использовать тот же селектор:

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