Angular Material mdInput border around the control

Question

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

    <md-form-field>
      <input type="text" mdInput [(ngModel)]="row.price" placeholder="Price">
    </md-form-field>

I tried to put a div around the input control with style="border: 1px solid black;" however it is creating border only around the input control itself. I tried to add border to md-form-field but it puts border only on the left and right (yet judging by height if I would be able to get border on top and bottom it looks like I would be able to achieve) any way to achieve that?

Solution 1

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.

Solution 2

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

Solution 3

This worked for me

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