CODEWITHSUNDEEP
cssangularangular-materialangular-material2
Trace Bullet
Trace Bullet

Reputation: 188

How do I add a border on a Angular Material textarea field?

I'm using Angular with Material Design components. How can I add a border around a textarea input field using CSS?

Example textarea from https://material.angular.io/components/input/examples:

<form class="example-form">
  <mat-form-field class="example-full-width">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>
</form>

What the default textarea looks like

Upvotes: 18

Views: 30067

Answers (3)

danday74
danday74

Reputation: 57146

To add to the answer from @philr ... you can change the border color with:

.mat-form-field:not(.mat-focused).grey-hover-border {
  &.mat-form-field-appearance-outline .mat-form-field-outline-thick {
    color: #e0e0e0;
  }
}

sorry for the SCSS!

Upvotes: 0

Muhammed Shafeeque
Muhammed Shafeeque

Reputation: 61

 <mat-form-field class="example-full-width" appearance="outline">
    <textarea matInput placeholder="Leave a comment"></textarea>
  </mat-form-field>

Upvotes: 3

philr
philr

Reputation: 1940

if you add appearance="outline" to your mat-form-field it will add a border around your field

source: https://material.angular.io/components/form-field/overview

Upvotes: 33

Related Questions