Adjust the starting color of a mat-input in Angular 9

Question

Adjust the starting color of a mat-input in Angular 9

I am encountering an issue with the styling of a standard matInput field within a mat-form-field, all contained within a [formGroup] div. The dark background of the parent element is causing visibility problems with the default dark text color of the input field. Here's a snippet of the HTML code:

<div [formGroup]="myInfo">
  Year: &nbsp;
  <mat-form-field>
    <input class="myClass" style="color: white" matInput (keypress)="numericOnly($event)" placeholder='YYYY' 
           formControlName="yearControl">
  </mat-form-field>
</div>

After researching online and following some advice, I made changes in the .scss file like so:

.childClass {
  input { color: #fff !important; }
  label.mat-input-placeholder { color: #fff !important; }
  ::ng-deep .mat-form-field-label { color: #fff !important; }
  ::ng-deep .mat-form-field-ripple { color: #fff !important; }
  ::ng-deep .mat-form-field-underline { color: #fff !important; }
}

While this successfully updated the placeholder and entered text to white, the underline remained black. Any further suggestions would be greatly appreciated. Thank you.

css angular colors mat-input

Answer 1

Answer №1

The reason it isn't functioning correctly is due to the selector you are using.

::ng-deep .mat-focused .mat-form-field-label

This selector contains the class .mat-focused, which only works when the field is focused on.

To fix this, simply update the selector to:

::ng-deep .mat-form-field-label and adjust the placeholder color with:

label.mat-input-placeholder

Answer 2

The reason it isn't functioning correctly is due to the selector you are using.

::ng-deep .mat-focused .mat-form-field-label

This selector contains the class .mat-focused, which only works when the field is focused on.

To fix this, simply update the selector to:

::ng-deep .mat-form-field-label and adjust the placeholder color with:

label.mat-input-placeholder

Answer 3

Answer №2

I modified the input color to a brighter shade against a dark background like so:

I created my own custom input component called switched-input.component

HTML:

 // switched-input.component.html
 <mat-form-field>
   <input matInput placeholder="{{placeholder}}" [formControl]="inputControl"/>
 </mat-form-field>

SCSS:

// switched-input.component.scss
mat-form-field {
  width: 100%;
}
// text color of user input when input is selected
input {
  color: #fff !important;
}

TypeScript:

// switched-input.component.ts
import { FormHelper } from './../../../helper/form.helper';
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'switched-input',
  templateUrl: './switched-input.component.html',
  styleUrls: ['./switched-input.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class SwitchedInputComponent implements OnInit {
  inputControl: FormControl;

  @Input() placeholder: string;

  @Input() set control(controlObj: FormControl) {
    this.inputControl = controlObj;
    if (this.placeholder && this.placeholder !== '') {
      this.placeholder = this.translateService.instant(this.placeholder);
    }
  }

  get control(): FormControl {
    return this.inputControl;
  }

  constructor(private translateService: TranslateService) {}

  ngOnInit() {

  }    
}

In order to change the underline and label color of the input fields, I added the following styles in my app's main styles.scss file:

// styles.scss
// underline color of mat input fields
.mat-form-field-underline {
  background-color: #fff !important;
}
// label color of mat input fields
.mat-form-field-appearance-legacy .mat-form-field-label {
  color: #fff;
}

https://i.sstatic.net/9PlHF.jpg

Answer 4

I modified the input color to a brighter shade against a dark background like so:

I created my own custom input component called switched-input.component

HTML:

 // switched-input.component.html
 <mat-form-field>
   <input matInput placeholder="{{placeholder}}" [formControl]="inputControl"/>
 </mat-form-field>

SCSS:

// switched-input.component.scss
mat-form-field {
  width: 100%;
}
// text color of user input when input is selected
input {
  color: #fff !important;
}

TypeScript:

// switched-input.component.ts
import { FormHelper } from './../../../helper/form.helper';
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'switched-input',
  templateUrl: './switched-input.component.html',
  styleUrls: ['./switched-input.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class SwitchedInputComponent implements OnInit {
  inputControl: FormControl;

  @Input() placeholder: string;

  @Input() set control(controlObj: FormControl) {
    this.inputControl = controlObj;
    if (this.placeholder && this.placeholder !== '') {
      this.placeholder = this.translateService.instant(this.placeholder);
    }
  }

  get control(): FormControl {
    return this.inputControl;
  }

  constructor(private translateService: TranslateService) {}

  ngOnInit() {

  }    
}

In order to change the underline and label color of the input fields, I added the following styles in my app's main styles.scss file:

// styles.scss
// underline color of mat input fields
.mat-form-field-underline {
  background-color: #fff !important;
}
// label color of mat input fields
.mat-form-field-appearance-legacy .mat-form-field-label {
  color: #fff;
}

https://i.sstatic.net/9PlHF.jpg

Adjust the starting color of a mat-input in Angular 9

Answer №1

Answer №2

Similar questions

Adjust the JavaScript variable upon pressing the "c" key

The alignment of the floating left element is creating conflicts with the styling of other div

Bringing in manageable RxJS operators

Populate an Angular form using @Input to display data retrieved from a Firebase database through a service injection

What steps should be taken to identify a new path following a call to router.navigate?

Is there a way to align the image to the left within the div contained in my header section?

Div expanding beyond intended size when media reaches maximum 468 pixels

I am encountering a continuous css ParserError while trying to compile my react project

What is the best way to personalize Material UI elements, such as getting rid of the blue outline on the Select component?

What is the reason behind Chrome removing an SVG image pattern while utilizing jQuery Draggable?

Is there a way to automatically redirect my page after clicking the submit button?

The Angular Material dialog fails to display content when triggered within an event listener in Google Maps

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

A div with an absolute position containing a header, content, and footer

Navigate through the website by transforming the arrow and clicking the link

Issue with jquery .height(value) function not functioning properly on Internet Explorer

Hidden input field when inactive

Utilizing ngx-pagination for repetitive instances of a single component

Tips for implementing form validation for a dropdown menu input

Timestamp in Angular for September 8, 2019 at 10: