The required attribute is not working in Chrome but does work in FireFox

Question

I'm using bootstrap for styling and I've not defined any of my own classes. Since FireFox is working, I believe that the structure I'm using is correct. But Chrome is not happy, and I don't know enough about the nuances between the two to track it down. The required attribute for the 'State' dropdown is not working in either, but I figure that's another question.

I came across an article describing how Chrome won't load scripts that are non ssl when the application url is ssl, but this should not apply as I'm using ng serve and my url is insecure. Otherwise, all articles related to the required attribute not working have to do with failures on FireFix, which is the opposite condition that I'm experiencing.

FireFox: 86.0.1 (64-bit)
Chrome:  89.0.4389.90 (Official Build) (64-bit)

From the component html

<div class="row">
  <div class="col-md-5 mb-3">
    <label for="{{idPrefix}}City">City</label>
    <input type="text" class="form-control" id="{{idPrefix}}City" placeholder="" required [(ngModel)]="model.City">
  </div>
  <div class="col-md-4 mb-3">
    <label for="{{idPrefix}}state">State</label>
    <select class="custom-select d-block w-100" id="{{idPrefix}}state" required [(ngModel)]="model.State">
      <option value="">Choose...</option>
      <option *ngFor="let State of StateArray" value="{{State.abbreviation}}">{{State.name}}</option>
    </select>
  </div>
  <div class="col-md-3 mb-3">
    <label for="{{idPrefix}}zip">Zip</label>
    <input type="text" class="form-control" id="{{idPrefix}}zip" placeholder="" required [(ngModel)]="model.Zip">
  </div>
</div>

index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

Answer 1

normally chrome does not create this red border for invalid inputs. you could add some css to crete that border manually:

input:required {
  border-color: #800000;
  border-width: 3px;
}

input:invalid {
  background-color: #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

but i honestly don't know how you would do that using bootsrap alone.