CODEWITHSUNDEEP
angularinputangular-material
Suresh Kannan
Suresh Kannan

Reputation: 75

Material Angular Text box with shadow

I am designing a form and i would like the input box like the picture below in angular material matInput. How to achieve this?

Here is a screenshot of how i want the input box to be displayed:

Upvotes: 0

Views: 1726

Answers (2)

Haijin
Haijin

Reputation: 2681

In case you want more control, add this to style sheet

.mat-form-field-flex{
  background-color: lightgray;
}

you can find the css class for each part of the component in the dev console.

Upvotes: 0

frido
frido

Reputation: 14129

By shadow I guess you mean the filled appearance of a material text field. You get this look by adding appearance="fill" to your mat-form-field.

<mat-form-field appearance="fill">
    <mat-label>Fill form field</mat-label>
    <input matInput placeholder="Placeholder">
</mat-form-field>

Form field appearance variants

Upvotes: 2

Related Questions