Angular Material mdInput border around the control
https://material.angular.io/components/form-field/overview#form-field-appearance-variants
The newer version of angular form field supports different appearances for the form fields like
- legacy (material default)
- standard
- fill
- outline
Outline is what you are looking for
look at the demo here
https://stackblitz.com/edit/angular-61fqsd?file=src/app/app.component.html
Recommended way to override default Material2 styles is to use ViewEncapsulation. deep
, ::ng-deep
and >>>
are depreciated and maybe dropped in future (official documentation).
The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep).
To set a border for the input, include the following in your component.ts
:
import { ViewEncapsulation } from '@angular/core';
@Component({
....
encapsulation: ViewEncapsulation.None
})
... then just add the following in your component styles:
/* To display a border for the input */
.mat-input-flex.mat-form-field-flex{
border: 1px solid black;
}
/* To remove the default underline */
.mat-input-underline.mat-form-field-underline {
background: transparent;
}
/* To remove the underline ripple */
.mat-input-ripple.mat-form-field-ripple{
background-color: transparent;
}
Here is a working demo.
This worked for me
.mat-form-field-underline .mat-form-field-ripple {
background: orange !important;
}