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

但是那没用...

如何使占位符文本变为粗体？如何使占位符文本变为粗体？

我也做了：添加了班级名称

<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

如何更改占位符样式

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

将::placeholder选择器与输入类一起使用。

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

更多阅读内容：Placeholders

Answer 3

请像这样使用<textarea></textarea> ...标签之间不要有空格。

Answer 4

尝试如下设置encapsulation：

@Component({
  encapsulation: ViewEncapsulation.None
})

也许您的样式无法使用，因为mat-form-field是一个不同的组件，而您的textarea在该组件内部。

有关更多信息，请检查this

scss文件将占位符文本设置为粗体

4 个答案: