4

I'm trying to modify the font size of the text in the placeholder attribute of a text area element. I can do this using vanilla CSS, but when I attempt to mimic the idea in my app--an Angular 2 app using Angular Material 2--I cannot obtain the desired behavior. In vanilla HTML/CSS I can simply do the following:

HTML: 

<textarea id="foo" placeholder="goodbye enemy!"></textarea>

CSS:

#foo::-webkit-input-placeholder{font-size: 100%;}

I simply modify the percentage value to modify the size of the placeholder text. However, when I attempt to try the same approach with Angular Material, I cannot modify the font size.

The Angular Material 2 doc on the input directive is here: Docs on the Angular 2 Material Input Directive. I've played around with the plnkr associated to it but cannot modify the placeholder text using the given approach. Does anyone know why? The docs state that the <md-input-container> is simply a wrapper for the native input/textarea tags so I am not sure if it is overriding some sort of behavior in the background. Any help would be appreciated.

An earlier SO discussion that could also be helpful.

jrDeveloper
  • 167
  • 2
  • 10

1 Answers1

4

The secret is that you don't need to style the input, but rather the generated label.

Considering the label for the placeholder is generated inside a <span> that immediately follows the <input>, you can target it with:

input + span > label {
  color: red !important;
}

The + denotes that you're only looking to target the very next matching element, and the > denotes a direct child.

This can be seen working in this Plunkr.

Note that the !important declaration is required for the selector above, because it has lower specificity than selectors in Angular's example CSS. Ideally, you'd want to provide higher specificity instead of using !important.

Hope this helps! :)

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
  • Worth noting this works for `textarea` as well, but only works in both with use of `mdInput` attached to the inner DOM. – Z. Bagley Aug 16 '17 at 23:47
  • Thanks! Out of curiosity, how did you recognize the correct combination of css selectors that was required? (The whole input + span > label business). I actually still can't seem to modified the generated label in my app using your technique, but I'm trying to target the correct combo of css selectors. – jrDeveloper Aug 21 '17 at 01:55
  • I worked it out through simple trial-and-error in the Angular example. By using the F12 Developer tools, I noticed that the ` – Obsidian Age Aug 21 '17 at 02:10
  • Thank you. It looks I'm on the same approach but things are not working out with getting the correct combination of selectors. If I posted the code from the dev tools, could you take a look? – jrDeveloper Aug 21 '17 at 02:47
  • It could be a little difficult; you'd need to post a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve), and that could be a bit tricky if you can't find that target element. I'd strongly recommend 'Inspecting' the element with F12 to find out **exactly** where it sits in the DOM. You can then craft your selector around that. If you're still unable to change the color, it's possible that something else has **higher specificity**, and you'll simply need to work up the chain in that case (also by trying using `!important` to start with). – Obsidian Age Aug 21 '17 at 02:52
  • I was able to fix it, but it involved fixing something in the global styles sheet of the application. Thank you for your help (and your patience!). – jrDeveloper Aug 21 '17 at 20:02