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;
}

我曾经尝试过按班级使用选择器

.s {
mat-palceholder:{
 font-weight: 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

请像这样使用<textarea></textarea> ......标签之间没有任何空格。

Answer 2

尝试将encapsulation设置如下：

@Component({
  encapsulation: ViewEncapsulation.None
})

也许你的风格不起作用，因为mat-form-field是一个不同的组件，你的textarea在那个组件内。

有关更多信息，请查看this

Answer 3

这是如何更改占位符样式的

::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;
}

demo

Answer 4

使用::placeholder选择器和输入类。

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

更多阅读：Placeholders