scss file set place holder text to bold

Question

I have an angular front end in which i have a form with textarea:

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

i also have a scss file for that component with:

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

I have tried using selecotors by class

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

but that didnt work...

How do i make the placeholder text BOLD? How do i make part of the placeholder text BOLD?

i also did: added class name

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

added to the scss file

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

but that didnt work..

thanks

Possible duplicate of [How to set the color and font style of placeholder text](https://stackoverflow.com/questions/38487394/how-to-set-the-color-and-font-style-of-placeholder-text) — Harsh Patel, Nov 22 '18 at 09:07
Have you set the ViewEncapsulation to "None" in the component? — Niral Munjariya, Nov 22 '18 at 09:42

Muhammed Albarmavi · Answer 1 · 2018-11-22T09:53:53.707

0

This how you can change the placeholder style

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

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

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

as far I know you can't change some of the text to bold and other is not the style apply to all placeholder text

in case of angular material

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

edited Nov 22 '18 at 09:53

answered Nov 22 '18 at 09:09

Muhammed Albarmavi

23,240
8
66
91

@user1997656 I have update the answer and include onl;ine demo – Muhammed Albarmavi Nov 22 '18 at 09:54

score 0 · Answer 2 · edited Mar 04 '19 at 20:37

0

Use the ::placeholder selector along with the input class.

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

More reading: Placeholders

edited Mar 04 '19 at 20:37

marc_s

732,580
175
1,330
1,459

answered Nov 22 '18 at 09:09

Allan Jebaraj

1,062
8
25

score 0 · Answer 3 · answered Nov 22 '18 at 09:41

0

please use <textarea></textarea> like this... without any space beetween tags.

answered Nov 22 '18 at 09:41

rajnik faldu

97
7

score 0 · Answer 4 · answered Nov 22 '18 at 09:48

Try to set encapsulation as below:

@Component({
  encapsulation: ViewEncapsulation.None
})

Maybe your styles are not working because mat-form-field is a different component and your textarea is inside that component.

For more information, please check this

scss file set place holder text to bold

4 Answers4