Angular Material mdInput border around the control

Question

I would like to style my mdInput control to have a black box around it:

Answer 1

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

1. legacy (material default)
2. standard
3. fill
4. 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

Answer 2

Try this::

.mat-form-field-appearance-fill .mat-form-field-underline::before {
height: 0px !important;

}

Answer 3

This worked for me

.mat-form-field-underline .mat-form-field-ripple {
  background: orange !important;
}

Answer 4

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.

Answer 5

Try this:

::ng-deep .mat-input-wrapper{
 background-color:black; 
}

or (depending what you need)

::ng-deep .mat-input-wrapper{
   border: 2px solid black;
}

DEMO

encapsulation: ViewEncapsulation.None has it's downside, that it will affect all the classes, you wish it or not. It's still not deprecated and I think it will be just replaced by something else.