The color of the input outline in an Angular Material form-field will change when the form-field is in focus

Issue Description: I am currently working on implementing the Angular material mat-form-field property. I have set the Form field appearance to outline, but I am encountering an issue where the input border color does not change when the input is selected.

Expected Outcome: The outline border color of the input field should change to black when the input is selected. The desired behavior is for the form field to display a different color when active.

Current Problem: At present, the form field displays the default primary color provided by Angular Material when it is in focus.

https://i.sstatic.net/lXcHn.png

These are all the dependencies in my project:

{
  "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"
  }
}
angulartypescriptangular-materialangular-material2angular-forms

Answer №1

If you want to customize the colors, use the CSS rules below.

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

Answer №2

When working with MatFormField, you have the option to set the active color using the theme color property as primary, accent, or warn. By default, it is set to primary. For instance, if you want to switch from the default primary color to the theme's accent color:

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

If black is consistently used as the active color in your application, it might be beneficial to structure your application's theme accordingly and designate black as either the primary or accent color. This way, all Angular Material components can incorporate black. Instructions on theming can be found here.

If you only wish to theme MatFormField throughout the application, you can create a theme where black is the primary or accent color and apply it exclusively to MatFormField. Consequently, all form fields in your application will automatically adhere to this special theme, defaulting to the designated primary color of that theme. More information can be found in this post.

The benefit of utilizing theming for this purpose is that it guarantees consistent results across all aspects of theme coloring and can seamlessly integrate with different styles for form fields (such as outline and fill variations). Additionally, you can apply the same theme to other components like MatSelect and MatChipList within MatFormField, as well as MatAutocomplete attached to a MatFormField input, ensuring that selected item colors and other theme elements complement the form field theme.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The FlatList glides effortlessly in any direction

My FlatList allows me to drag and move it in all directions (up/down/right/left) even though it appears vertically due to styling. The scroll bar still shows horizontally, which I want to disable. How can I achieve this? This is the code snippet for using ...

javascriptreactjstypescriptreact-nativereact-native-flatlist

Tips for validating nominal-typed identifiers

I recently started experimenting with the enum-based nominal typing technique explained in more detail at this link. enum PersonIdBrand {} export type PersonId = PersonIdBrand & string interface Person { id: PersonId firstName: string lastName: ...

typescriptenums

DiscordJS is throwing a TS2339 error stating that the property 'forEach' is not found on the type 'Collection<string, GuildMember>'

Upon attempting to utilize the code provided, I encountered the error messages Property 'forEach' does not exist on type 'Collection<string, GuildMember> and Property 'size' does not exist on type 'Collection<string, ...

typescriptdiscord.js

Issues with the functionality of Angular and Material's multi-level menu and breadcrumb integration

Currently, I am working on a project using Angular 6 and Angular Material 6. I am attempting to create a multilevel menu with breadcrumb functionality. While I have successfully implemented the multilevel menu, I am facing an issue with navigating the menu ...

angularangular-materialangular6breadcrumbsangular-material-6

There was an error while compiling the Angular application using ng serve and ng build. The error occurred in the module build and seemed to be related to the Sass loader. The specific issue was an expected "}" that was

After experimenting with various nodejs versions and npm using nvm, attempting to downgrade/upgrade ng core and ng cli, trying to install sass-node and removing sass (and vice versa), I have exhausted all options. Despite searching through numerous Stack ...

angularnpmnode-sass

Angular - Expanding a d3 SVG element generated dynamically in the code

Welcome to my first question on this platform. If I make any mistakes, please forgive me. I am currently working on creating a simple SVG in Angular using the d3 library, but I am struggling to make it scale properly. After doing extensive research on SV ...

angularsvgd3.jsscale

implementing an event listener in vanilla JavaScript with TypeScript

Can anyone help me figure out how to correctly type my event listener in TypeScript + Vanilla JS so that it has access to target.value? I tried using MouseEvent and HTMLButtonElement, but I haven't been successful. const Database = { createDataKeys ...

typescript

Creating personalized error messages for Angular 4 validation

I'm currently tackling a form in Angular 4 (reactive forms) and I'm encountering an issue with displaying error messages for the email address field individually. I've attempted the following format but haven't had any success. <di ...

angularangular-reactive-formsangular-validation

There are no imports in index.js and there is no systemjs configuration set up

After creating a fresh Angular project using ng new some-name, I noticed that the generated index.html file does not include any <script> tags and there is no SystemJS configuration either. Is this the expected behavior? I was anticipating the CLI ...

htmlangulartypescriptangular-cli

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

Currently, I am facing an issue with using Angular2 Router.navigate as it is not functioning as expected. import { Injectable } from '@angular/core'; import { Http, Headers } from '@angular/http'; import { Router } from '@angular/ ...

javascriptangulartypescriptservicerouter

Showcasing regional JSON information on an Angular 9 template

I want to showcase the following JSON data in my HTML template [ { "Event Name": "Get All Information", "Info": "Retrieves all data stored in the system. Caution: this request returns more than 8MB and takes over 5 seconds", "Endpoint": "/ ...

arraysangularionic-framework

Step-by-step guide on navigating back in Angular 12 without triggering a page refresh

As an illustration, consider a scenario where I input values into a table and move to the next page. Upon returning to the page, I expect the entered values to still be present. I attempted to achieve this using this._location.back(), but instead of disp ...

htmltypescriptangular12

I encountered an error message while using the application. Any suggestions on how to resolve this issue?

Error: Route configuration for '' is invalid. Component, redirectTo, children, or loadChildren must be provided. Within app.module.ts, RouterModule.forRoot([ { path:'', loadChildren:'./mainhomemodule/mainhomemodule.modu ...

angularroutesangular6angular-load-children

Guide to retrieving an array of arrays in Angular 2

How do I retrieve an array of array data in Angular 2? The JSON data I have is as shown below, [[{ "pk_emp_id":5, "tenant_id":"Zone1", "location_id":1, "emp_number":"sk44", "prefix":"", "first_name":"qqqqq", "middle_name":"www", "last_nam ...

arraysangular

Error message: The attempt to convert the value ":listId" to an ObjectId for the model "Task" failed at the path "_listId"

I am encountering the casterror in my mongoose. I apologize for raising this question again, but I am struggling to identify my error. While I can see the results using Postman, I am unable to display the tasks on my frontend. I am facing difficulty in fet ...

node.jsangularmongodbmongoose

Exploring the Image Path in Angular 8

Struggling with Angular 8, I just can't seem to get the correct path set up for an image in my project. I've attempted <img src="./assets/images/image.jpg"> and <img src="../images/image.jpg">, but haven't had any success. Can an ...

angular

The storage does not reflect updates when using redux-persist with next-redux-wrapper in a Typescript project

I'm currently working on integrating redux-persist with next.js using next-redux-wrapper. However, I'm facing an issue where the storage is not updating and the state is lost during page refresh. Below is my store.ts file: import { createStore, ...

typescriptreact-reduxnext.jsredux-persistnext-redux-wrapper

Angular (4, 5, 6, 7) - An easy guide to implementing slide in and out animations using ngIf

How can you implement a basic sliding animation in Angular4 to show and hide a container element? For example: <div *ngIf="show"> <!-- Content --> </div> Slide the content in (similar to jQuery's slideDown() method) from top t ...

angulartypescriptangular-animations

Developing Custom Methods with TypeScript Factories - Step 2

Working in a factory setting, I find myself needing to incorporate custom methods at some point. Thanks to the valuable input from the community, I've made progress towards my goal with this helpful answer, although I'm required to include a see ...

typescript

Filtering a table in Angular2 based on two inputs with a custom pipe

Within my table, I have two columns that display dates as strings. My objective is to filter this table based on input from two ngb-datepickers (with a default value of null). Despite importing a custom pipe into declarations in app.module.ts, I keep encou ...

htmlangulartypescriptangular2-pipe