How to move placeholder to top on focus AND while typing inside form-input?

I think this is a new trend for HTML forms most websites have been following for the last couple of years now. It looks amazing seeing labels animating and changing their position to the top of the input and staying itself there when input is filled with some text.

Here is a demo with source code to float labels or input placeholder on top on focus and while typing inside form-input.

DEMO

Open demo in a full window – https://demos.webdevpuneet.com/jquery/floating-input-labels/index.html

Source Code

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Float Labels with :placeholder-shown – CSS, HTML, jQuery</title>
    <meta name="description" content="Float Labels with :placeholder-shown – CSS, HTML, jQuery" />
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

    <script>
      $(document).ready(function(){
        $('.field__clear').click(function(){
          $this = $(this);
          $this.closest('.field').find('input, textarea').val('');
        });
      });
    </script>

    <style>
      body {
        font-family: Avenir Next, Avenir, SegoeUI, sans-serif;
      }


      form {
        margin: 2em 0;
      }
      /**
      * Make the field a flex-container, reverse the order so label is on top.
      */

      .field {
        display: flex;
        flex-flow: column-reverse;
        margin-bottom: 1em;
        position:relative;
      }
      .field__clear{
        position:absolute;
        right:0;
        bottom:10px;
        cursor:pointer;
        display:none;
      }
      /**
      * Add a transition to the label and input.
      * I'm not even sure that touch-action: manipulation works on
      * inputs, but hey, it's new and cool and could remove the
      * pesky delay.
      */
      label, input, textarea {
        transition: all 0.2s;
        touch-action: manipulation;
        transform-origin: left bottom;
      }

      input, textarea {
        font-size: 1.5em;
        border: 0;
        border-bottom: 1px solid #ccc;
        font-family: inherit;
        -webkit-appearance: none;
        border-radius: 0;
        padding: 0;
        cursor: text;
      }

      input:focus, , textarea:focus {
        outline: 0;
        border-bottom: 1px solid #666;
      }

      label {
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      /**
      * Translate down and scale the label up to cover the placeholder,
      * when following an input (with placeholder-shown support).
      * Also make sure the label is only on one row, at max 2/3rds of the
      * field—to make sure it scales properly and doesn't wrap.
      */
      input:placeholder-shown + label,
      textarea:placeholder-shown + label{
        cursor: text;
        max-width: 66.66%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: translate(0, 2.125rem) scale(1.5);
      }
      /**
      * By default, the placeholder should be transparent. Also, it should
      * inherit the transition.
      */
      ::-webkit-input-placeholder{
        opacity: 0;
        transition: inherit;
      }
      /**
      * Show the placeholder when the input is focused.
      */
      input:focus::-webkit-input-placeholder,
      textarea:focus::-webkit-input-placeholder {
          opacity: 1;
      }
      /**
      * When the element is focused, remove the label transform.
      * Also, do this when the placeholder is _not_ shown, i.e. when
      * there's something in the input at all.
      */
      input:not(:placeholder-shown) + label,
      input:focus + label,
      textarea:not(:placeholder-shown) + label,
      textarea:focus + label{
        transform: translate(0, 0) scale(1);
        cursor: pointer;
      }
      /* Show input clear on filled input items */
      input:not(:placeholder-shown) + label + .field__clear,
      textarea:not(:placeholder-shown) + label + .field__clear{
        display:block;
      }
    </style>
  </head>
  <body>
    <h1 style="margin-bottom:20px;">Float Labels with :placeholder-shown – CSS, HTML, jQuery</h1>

    <form action="">
      <div class="field">
        <input type="text" name="fullname" id="fullname" placeholder="Jane Appleseed">
        <label for="fullname">Name</label>
        <span class="field__clear">clear</span>
      </div>

      <div class="field">
        <input type="email" name="email" id="email" placeholder="[email protected]">
        <label for="email">Email</label>
        <span class="field__clear">clear</span>
      </div>

      <div class="field">
        <input type="email" name="email" id="email" placeholder=" " value="[email protected]">
        <label for="email">Email</label>
        <span class="field__clear">clear</span>
      </div>

      <div class="field">
        <textarea name="textarea" id="textarea" placeholder="Kutch bhi likh daalo here..."></textarea>
        <label for="textarea">Textarea</label>
        <span class="field__clear"><i class="icon-clear-input"></i></span>
        <span class="field__clear">clear</span>
      </div>

  </form>

  </body>
</html>