<div class="form-outline m-5">

  <input type="text" id="formControlLg" class="form-control form-control-lg" />

  <label class="form-label" for="formControlLg">Form control lg</label>

</div>

​

<div class="form-outline m-5">

  <input type="text" id="formControlDefault" class="form-control" />

  <label class="form-label" for="formControlDefault">Form control default</label>

</div>

​

<div class="form-outline m-5">

  <input type="text" id="formControlSm" class="form-control form-control-sm" />

  <label class="form-label" for="formControlSm">Form control sm</label>

</div>

​

<div class="form-outline m-5">

  <textarea class="form-control" id="textAreaExample" rows="4"></textarea>

  <label class="form-label" for="textAreaExample">Message</label>

</div>

.form-control:focus ~ .form-notch div:first-child {

    border-color: red !important;

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important; clip-path: inset(-8px 0px -8px -8px);

  }

  .form-control:focus ~ .form-notch div:nth-child(2) {

    border-bottom-color: red !important;

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0), 0 0 8px rgba(255, 0, 0, 0.6) !important; clip-path: inset(0px 0px -8px 0px);

  }

  .form-control:focus ~ .form-notch div:last-child {

    border-color: red !important;

    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6) !important; clip-path: inset(-8px -8px -8px 0px);

  }

​

  .form-control:focus ~ .form-label {

    color: red !important; /* para el texto sobre la linea

  }

​