I am currently working on adjusting the font size of the text within the placeholder attribute of a textarea element. While I have been successful in achieving this using vanilla CSS, I have encountered difficulties when trying to implement the same concept in my Angular 2 app with Angular Material 2. In plain HTML/CSS, I would typically use the following code:
HTML:
<textarea id="foo" placeholder="goodbye enemy!"></textarea>
CSS:
#foo::-webkit-input-placeholder{font-size: 100%;}
In this method, adjusting the percentage value allows me to change the size of the placeholder text. However, despite attempting to apply a similar technique with Angular Material, I have not been able to alter the font size as desired.
You can find the Angular Material 2 documentation for the input directive here: Docs on the Angular 2 Material Input Directive. Although I have experimented with the associated plnkr, I have not succeeded in modifying the placeholder text through this approach. If anyone has insight into why this may be happening, please share your thoughts. According to the documentation, the <md-input-container> merely serves as a wrapper for the native input/textarea tags, leading me to wonder if it is somehow overriding certain behaviors in the background. Any assistance on this matter would be greatly appreciated.
You may also want to refer to this previous discussion on Stack Overflow for additional insights.