9

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.

Improve this question

6 Answers 6

Reset to default
5

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

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This is what's working but a word of caution, the /deep/ selector is depreciated so eventually this wont work...
Not a valid answer anymore.
3

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

Improve this answer

Comments

3

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!

Improve this answer

1 Comment

Thanks, that's what helped me in my case
3

You can use the css selector you use below:

/deep/ .mat-input-underline {
   background-color: white;
}

The /deep/ combinator is slated for deprecation in Angular, so its best to do without it. Unfortunately, the .mat-input-underline from Angular Material is highly specified, which makes it very difficult to override without using /deep/

The best way I have found is to use an ID, which allows you a higher specificity compared to the default Angular Material styles. 

<form id="food-form" [formGroup]="form" (ngSubmit)="submit()">
  <mat-input-container>
    <input matInput placeholder="Favorite food" value="Sushi">
  </mat-input-container>

Then, your 'food-form' id can be used to target this form in the global.scss file. It can't be targeted from the component.scss without breaking your view encapsulation. If you don't use /deep/ the .mat-form-field-underline has to be changed at the global level. The ripple is the color used when selecting the input.

#food-form {
  .mat-form-field-underline {
    background-color: $accent;
  }
  .mat-form-field-ripple {
    background-color: $accent;
  }
}

I hope the Angular Material team pulls back their specificity in the future because currently there's no easy way to override their defaults.

Improve this answer

2 Comments

Thanks for this, do you know how to change the colour of the cursor?
.mat-input-element { caret-color: black; }
1

The above solutions didn't work for me...I understand that angular material changes their class names and styles often. I had to do this in my global style.css

.mat-form-field-underline {
  background-color: rgb(177, 140, 81) !important;
}

.mat-form-field-underline.mat-disabled {
  background-color: transparent !important;
}
Improve this answer

1 Comment

Hey Mike, do you know how to change the colour of the cursor?
0

CSS

input[class~="bg-transparente"] {
  background-color: transparent;
}

and in your input, do this

HTML

 <input matInput class="bg-transparente">
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.