Menu
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
433
You need to increase the min-width of the left outline and apply border radius to only the left or right side.
mat-form-field-outline class . This class is responsible for the 4 sides of borders around the mat form field element. So, to change the mat form field border color, you have to simply override the existing border color with the new one. And to do that we take the help of the ::ng-deep .
The <mat-form-field> is a component that is used to wrap multiple MAT components and implement common text field styles of the form-field such as hint message, underlines, and floating label. These five MAT components are designed to work inside the form-field: <mat-chip-list>
<mat-form-field> is a component used to wrap several Angular Material components and apply common Text field styles such as the underline, floating label, and hint messages.
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
116
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
