CDN Floating Labels

cdn-floating-labels.markdown

CDN Floating Labels

💡 Learn how to create floating labels in CSS using the :placeholder-shown selector.

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

<div class="body">
  <div class="container max-width-xxxs">
    <form>
     <div class="wrapper">
      <input class="form-control width-100%" placeholder="Name" type="text" name="inputName" id="inputName">
      <label class="floating-label" for="inputName">Name</label>
     </div>
    </form>
  </div>
</div>

scripts

<script src="https://unpkg.com/[email protected]/main/assets/js/util.js"></script>

style.scss

// 💡 Floating labels in CSS using the :placeholder-shown selector.
.body {
  height: 100vh;
  display: flex;
  align-items: center;
}

.wrapper {
  position: relative;
}

.floating-label {
  position: absolute;
  top: -1.25em;
  left: 0;
  opacity: 0;
  transform: translateY(20%);
  transition: transform .3s;
}

.form-control:not(:placeholder-shown) + .floating-label {
  opacity: 1;
  transform: translateY(0);
}

styles

<link href="https://unpkg.com/[email protected]/main/assets/css/style.css" rel="stylesheet" />