Bootstrap Form Validation Highlighting Label Text In Green When Input Is Not Required?

I have a weid thing happening with my Bootstrap 4 form validation where with two radio buttons have their label's foreground being changed to green when the form is validated. If t

Solution 1:

When the form is validated with HTML5, the :valid state (or :invalid on validation failure) is applied to all of the form inputs. I don't know of a way to prevent the :valid state from being applied to specific inputs.

Once :valid has been applied to the input, Bootstrap has this CSS which makes the label green...

.was-validated .form-check-input:valid~.form-check-label {
    color: #28a745;
}

To override the green style that Bootstrap is applying, use the text-dark class on the label. This way the label will always be black, and not green(:valid) or red(:invalid).

https://www.codeply.com/go/gvR4ArUPKL

  <div class="form-check">
       <input class="form-check-input" type="radio" name="Radios" id="type2RadioButton" value="option2">
       <label class="form-check-label text-dark" for="type2RadioButton">
          Type 2 user
       </label>
  </div>