scss файл устанавливает текст заполнителя на жирный

Question

У меня есть угловой интерфейс, в котором у меня есть форма с textarea:

<mat-form-field class="full-width">
      <textarea class="left-aligned" formcontrolname="x1" matInput placeholder="some text"/>
</mat-form-field>

У меня также есть файл scss для этого компонента с:

mat-form-field{
margin-left:20px;
}

Я пыталсяиспользуя selecotors по классам

.s {
mat-palceholder:{
 font-weight: bold;
}
}

, но это не сработало ...

Как сделать текст заполнителя BOLD?Как сделать часть текста заполнителя BOLD?

я также сделал: добавлено имя класса

<mat-form-field class="full-width">
          <textarea class="left-aligned x1" formcontrolname="x1" matInput placeholder="some text"/>
    </mat-form-field>

добавлено в файл scss

.x1::placeholder{
color: green;
font-weight: bold;
}

, но это не такработа ..

спасибо

Answer 1

Попробуйте установить encapsulation, как показано ниже:

@Component({
  encapsulation: ViewEncapsulation.None
})

Возможно, ваши стили не работают, потому что mat-form-field - это другой компонент, а ваш textarea находится внутри этого компонента.

Для получения дополнительной информации, пожалуйста, проверьте это

Answer 2

Используйте селектор ::placeholder вместе с классом ввода.

.left-aligned::placeholder { // Your Css code }

Дополнительные сведения: Заполнители

Answer 3

используйте <textarea></textarea> вот так ... без пробелов между тегами.

Answer 4

Таким образом, вы можете изменить стиль заполнителя

::placeholder { // *::placeholder 
  color: red;
  font-weight:bold
}

.class-name::placeholder {
  color: red;
  font-weight:bold
}

input::placeholder {
  color: red;
  font-weight:bold
}

, насколько я знаю, вы не можете изменить часть текста на жирный, а другой стиль не распространяется на весь текст заполнителя

в случае углового материала

style.css

mat-form-field span.mat-form-field-label-wrapper label {
  color:red !important;
}


mat-form-field.mat-focused span.mat-form-field-label-wrapper label {
  color:blue !important;
}

демо