Making a responsive login form with bootstrap with an example. How to make the form label transition persist after I add text?

I'm trying to build a nice responsive login form with bootstrap but I'm facing an interesting issue.

I would like to make the label to move away from the form input when a text is inside it and I can do that! But the problem is that when I click outside of the login form the label goes back to the middle. How can I force the transition to persist so that when a text is inside my form the label is kept out of the way?

Here is nice gif with the issue to make it easy visualize

here is the fiddle link: https://jsfiddle.net/d10ayfw5/

body {    margin: auto;    padding-top: 30px;    max-width: 300px;  }    div {    margin: 20px 0 20px 0;  }    .form-outline {    position: relative;    width: 100%;    font-size: 1rem;    font-weight: 400;    transition: all .2s linear;  }    .form-control:active~.form-label {    transform: translateY(-1.5rem) translateY(.1rem) scale(.8);    background-color: rgb(255, 255, 255);  }    .form-control:focus~.form-label {    transform: translateY(-1.5rem) translateY(.1rem) scale(.8);    background-color: rgb(255, 255, 255);  }    .form-control~.form-label {    position: absolute;    top: 0;    left: .75rem;    padding-top: .5rem;    pointer-events: none;    transition: all .2s ease-out;    color: rgba(0, 0, 0, .6);    margin-bottom: auto;  }

<!-- Latest compiled and minified CSS -->  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">    <div class="container d-flex align-items-center">    <div class="row">      <div class="col-md-2">        <form>          <div class="form-outline mb-4">            <input type="email" id="form1Example1" class="form-control" />            <label class="form-label" for="form1Example1">                  Email address                </label>          </div>            <div class="form-outline mb-4">            <input type="password" id="form1Example2" class="form-control" />            <label class="form-label" for="form1Example2">Password</label>          </div>            <button type="submit" class="btn btn-primary btn-block">                Sign in          </button>        </form>      </div>    </div>  </div>

https://stackoverflow.com/questions/67013013/making-a-responsive-login-form-with-bootstrap-with-an-example-how-to-make-the-f April 09, 2021 at 07:10AM