float-placeholder
Version:
Pure implementation of Float Label pattern (compatible with Bootstrap 4).
1 lines • 830 B
CSS
.float-label{color:#9b9b9b;font-size:11px;position:absolute;z-index:4;left:10px;top:6px;padding:0 3px;opacity:0;visibility:hidden;display:inline-block;transition:color .15s ease-in-out,opacity .15s ease-in-out,visibility .15s ease-in-out,-webkit-transform .15s ease-in-out;transition:color .15s ease-in-out,opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out;transition:color .15s ease-in-out,opacity .15s ease-in-out,visibility .15s ease-in-out,transform .15s ease-in-out,-webkit-transform .15s ease-in-out}.float-label::before{content:'';display:block;width:100%;height:2px;top:8px;left:0;position:absolute;background:#fff;z-index:-1}.float-label--active{color:#4aabe4}.form-group--float-label .float-label{opacity:1;visibility:visible;-webkit-transform:translateY(-14px);transform:translateY(-14px)}