I am trying to have mat-label text be in Red – having red font either part of a required field as input or select type fields. Input and Select fields have an attribute required. I would like the red font to be on page load and not after some user interaction.

Isn’t there something out of the box angular? This seems like a trivial thing should be available out of the box without tinkering with CSS, classes or do on focus on blur script call tricks.

So far I get the astricts but no red color.

        <div class="row">
          <div class="col-sm-6">
            <mat-form-field [floatLabel]="'always'">
              <mat-label>Select Your Car</mat-label>
              <select matNativeControl id="mySelectId" required>
                <option value="" disabled selected></option>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
              </select>
            </mat-form-field>
          </div>
          <div class="col-sm-6">
            <mat-form-field [floatLabel]="'always'">
              <mat-label>Select Your Mileage</mat-label>
              <input id="mil" #mil
                    matInput name="mil"
                    placeholder="Mileage"
                    [(ngModel)]="model.mil"
                    required>
            </mat-form-field>
          </div>
        </div>

Desired Result: