Snippet of the Day 2020-03-27

I want to get in the habit of posting little bits of code that have been useful in my day to day. Here’s a little snippet for material design labels. This creates the little rising effect using pure CSS. I built this to play nice with bootstrap.


<div class = 'mat-group'>	 
    <input type = 'text' class = 'form-control' placeholder = 'anything, but must be something.'>
    <label>The placeholder text.</label>
</div>

<style>
    .mat-group label { position:absolute;margin-top:-1.25rem; pointer-events:none; transition: all .3s ease; color: rgba(0,0,0,.26);}
    .mat-group input:focus + label,.mat-group input:not(:placeholder-shown) + label { position:absolute; margin-top:-2.7rem; font-size: .75rem; color:#009688; }
    input::placeholder {color:transparent !important;}
</style>

In action:

Leave a Reply

Your email address will not be published. Required fields are marked *