How to create two inputs as one form field and apply style specifically in Angular Material?

0
votes

Using Angular Material, I am building an example app with a form, which has a form field with two elements (input field and dropdown).

enter image description here

So, for time being, I have implemented flex styles and attributes as follows:

<div class="row">
    <mat-label>Dessert</mat-label>
</div>
<div fxLayout="row"> 
    <mat-form-field appearance="outline" fxFlex="80">
        <input matInput type="text" formControlName="">
    </mat-form-field>
    <mat-form-field appearance="outline" fxFlex="20" style="background-color: yellow;">
        <mat-select formControlName="quantity"> 
            <mat-option value="gm">Grams</mat-option>
            <mat-option value="kg">Kilos</mat-option>
            <mat-option value="mg">Milligrams</mat-option>
        </mat-select>
    </mat-form-field>
</div>

And if I apply same style to mat-select, then too the style is applied not correctly.

I need the bg color applied exactly to the dropdown menu.

I am learning Angular Material, so any solution provided to this is highly appreciated and thanks in advance.

1
cssangularflexboxangular-materialangular-material2

1 Answers

0
votes

set class to the mat-form-field

<mat-form-field appearance="fill" class="bg__yellow">

then in css file

.bg__yellow {
  background-color: yellow;
}