Search code examples
angularangular-material2

Manipulating Angular Material Input Form Styling


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.


Solution

  • 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 */
    }
    

    demo