WooCommerce checkout field floating labels

by JOKKER

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p class="form-row form-row-wide thwcfd-field-wrapper thwcfd-field-email validate-required validate-email" id="billing_email_field" data-priority="10">
  <label for="billing_email" class="">
    Email address&nbsp;
    <abbr class="required" title="required">*</abbr>
  </label>
  <span class="woocommerce-input-wrapper">
    <input type="email" class="input-text " name="billing_email" id="billing_email" placeholder="" value="" autocomplete="email">
  </span>
</p>

<p class="form-row form-row-first thwcfd-field-wrapper thwcfd-field-text validate-required" id="billing_first_name_field" data-priority="20">
  <label for="billing_first_name" class="">
    First name&nbsp;
    <abbr class="required" title="required">*</abbr>
  </label>
  <span class="woocommerce-input-wrapper">
    <input type="text" class="input-text " name="billing_first_name" id="billing_first_name" placeholder="" value="" autocomplete="given-name">
  </span>
</p>

<p class="form-row address-field thwcfd-field-wrapper thwcfd-field-text validate-required form-row-wide" id="billing_address_1_field" data-priority="50">
  <label for="billing_address_1" class="">
    Address&nbsp;
    <abbr class="required" title="required">*</abbr>
  </label>
  <span class="woocommerce-input-wrapper">
    <input type="text" class="input-text " name="billing_address_1" id="billing_address_1" value="" placeholder="" autocomplete="address-line1">
  </span>
</p>

CSS

label {
  position: absolute;
  margin: 15px 0 0 12px;
  transition: all 0.2s ease;
}

.display-floating-label label {
  position: absolute;
  margin: 5px 0 0 12px;
  color: #606060;
  font-size: 12px;
}

input {
  display: block;
  padding: 15px 12px;
  border: 1px solid #bbb;
  border-radius: 5px;
  width: 300px;
  transition: all 0.2s ease;
}

.display-floating-label input {
  padding: 22px 12px 8px;
}


abbr {
  text-decoration: none;
  margin: 0;
}

JavaScript

$(document).ready(function() {

  $('.input-text').on('input', function() {

    var valueLength = $(this).val().length;

    if (valueLength > 0) {
      $(this).closest('.form-row').addClass('display-floating-label');
    } else {
      $(this).closest('.form-row').removeClass('display-floating-label');
    }

  });

});