Angular Material mdInput border around the control

user_282585 0
Viewed 29870

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?

angular-material2 angular-material angular
5 Answers
user_8110560

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.

user_17919130

This worked for me

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

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.

user_54684630

Try this::

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

}

user_129308450
Related