LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.full-height {
  height: 100vh;
}

input:focus + label,
input:not(:placeholder-shown) + label {
  margin-top: -2em;
  -webkit-transform-origin: left;
          transform-origin: left;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

Description

To get the sleek animated input labels with Materialize CSS the framework uses jQuery. Looking at the animation I thought I could achieve the same with just CSS and some fancy selectors. Needs some poly-filling for older/shitty browsers/IE/Edge but for most users this will do just fine!
Term
Sat, 04/14/2018 - 20:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv