Manipulating Angular Material Input Form Styling

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

Every HTML Element generated from a Angular Material component gets a class mat- css class assigned to it. They can be used for styling.

The input component as you are talking about has some nested elements, so you have to decide where you want to apply your styling.

To set styling to the whole input wrapper use:

.mat-input-wrapper {
    background: gray;
}

Inspect the generated html to see classes for the more nested elements - such as mat-input-element

I had a similar problem adjusting with width of my form field. When investigating found that the answer that referenced Nehal's answer is correct, but also deprecated in the latest version, 5.0.0-rcX, https://angular.io/guide/component-styles. I continued to double check my CSS selectors but found I needed to change the ViewEncapsulation.

What worked for me was in my css/scss file (of course modify with your own selectors as needed):

mat-input-container {
    // Your CSS here
}

And in my components ts file:

@Component({
    selector: 'my-component-selector',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Without changing the encapsulation, the CSS selector would not get applied.

Good luck!