I am new to Angular and Angular Material (AM). By default, AM Input Component shows the primary
color of your palette until you click on the form, where then it changes the placeholder
value and marker line to the accent
color. Is there a way to manipulate the form so that the accent color is always showing? In other words, the form will always be highlighted. The issue is that my primary color is dark, and my website page background is also dark, therefore, the placeholder
and marker line are barely visible unless the form is clicked on by the user. This would also be a nice color addition to my site's page.
Here is the sample of the required html from the AM docs:
<md-input-container>
<input mdInput placeholder="Favorite food" value="Sushi">
</md-input-container>
You can add color="accent"
to the input line
, but again, the color only appears when the form is clicked on by the user.
Thank you in advance.
You can add following in your component's css file:
/deep/ .mat-input-underline {
background-color: #FF0000; /* replace this color with your accent color hex code */
}