CODEWITHSUNDEEP
angulartypescriptangular-materialangular-material2angular-forms
Anup
Anup

Reputation: 181

Angular Material form-field outline input color change when the form-field is active

Problem Statement: I am implementing Angular material mat-form-field property. I put Form field appearance as a outline. I am trying to change the color of the input border when the input is selected.

Expected Behaviour. The input field outline border color should change when the input is selected. I want to change the color of the outline into black when the form-field is active.

Current Behavior: Right now it's showing the angular material default primary color when the form field is active.

enter image description here

This are all my dependency

{
  "dependencies": {
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "aws-amplify": "^1.1.6",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.2.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.3",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

Upvotes: 4

Views: 14080

Answers (2)

G. Tranter
G. Tranter

Reputation: 17928

MatFormField uses the theme color property so you can specify the active color as either primary, accent, or warn. The default is primary. For example, to change from the default primary color to the theme's accent color:

<mat-form-field color="accent">

If using black as the active color is a pattern throughout your application, I suggest you theme your application accordingly and make black either your primary or accent color so that all of the Angular Material components can use it. Instructions on theming can be found here.

If you want to theme just MatFormField across the application, you can create a theme with black as the primary or accent color and apply it only to MatFormField. Then all of the form fields in your application will automatically be colored according to the special theme and will default to whatever primary color that theme specifies. Details can be found in this post.

The advantage of using theming to do this is that it will guarantee the result for all aspects of theme coloring and will work with whatever appearance of form field you choose (in case you want to change or use a mix of outline and fill for example). It also allows you to apply the same theme to other components like MatSelect and MatChipList which can be used in MatFormField, and MatAutocomplete which is attached to a MatFormField input, so that the colors of selected items and other theme elements will match the form field theme.

Upvotes: 1

Marshal
Marshal

Reputation: 11081

The below CSS should allow you to override the colors.

/* default and hover color */
::ng-deep .mat-form-field-appearance-outline .mat-form-field-outline {
    color: red;
}

/* focused color */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
    color: green;
}

/* floating label color */
::ng-deep .mat-form-field-appearance-outline.mat-focused .mat-form-field-label { 
    color: green; 
}

Upvotes: 12

Related Questions