Angular Material Form Style - Input Background and Button Height

1
votes

I have a pretty basic form of an e-mail input and submit button. I'm trying to do the following:

  • Have the e-mail input background be white
  • Have the Submit button be the same height as the input

When I try to change the background of the input in CSS, it only changes a small rectangle within the Angular Material input field. Also, the button doesn't change heights when I change the height property to 100%.

I'm sure I am missing something simple. Can anyone help?

<form>
                <mat-form-field appearance="outline">
                    <mat-label>E-Mail</mat-label>
                    <input matInput placeholder="E-Mail" required>
                </mat-form-field>
                <button mat-raised-button color="primary" type="submit">Get Updates!</button>
</form>

Angular Material Form

1
htmlcssangularangular-material

1 Answers

2
votes

That should get the input & the button to get equal hight:

form {
   display:flex;
   flex-direction:row;
}

And the reason the input element wont style. Is because you are tying to style an element in mat-form-field which is a different component. If you want to style inner component elements like in your case, you should do like so:

:host ::ng-deep mat-form-field {
   input {
       background-color:#fff;
   }
}