Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Material mdInput border around the control

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?

like image 322
AlexanderM Avatar asked Sep 19 '17 22:09

AlexanderM


People also ask

How do you remove a border from a mat field?

Try border-style: none . – N.F.

What is matSuffix?

html - matSuffix makes mat-icon not horizontally centered in mat-icon-button - Stack Overflow.


3 Answers

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

like image 195
Shishya Avatar answered Oct 13 '22 10:10

Shishya


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.

like image 36
Faisal Avatar answered Oct 13 '22 10:10

Faisal


This worked for me

.mat-form-field-underline .mat-form-field-ripple {
  background: orange !important;
}
like image 37
Siraj Kakeh Avatar answered Oct 13 '22 10:10

Siraj Kakeh