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">
       <inputclass="form-check-input"type="radio"name="Radios"id="type2RadioButton"value="option2"><labelclass="form-check-label text-dark"for="type2RadioButton">
          Type 2 user
       </label></div>