"Input Materialized with CSS"
Bootstrap 4.1.1 Snippet by paulohnmatos

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <section> <form action=""> <h1>Material Design Input with pure CSS</h1> <div class="input-container"> <input id="name" class="input" type="text" pattern=".+" required /> <label class="label" for="name">Nome</label> </div> </form> </section> </div> </div> <!--I was not the one who developed this input, below is the original font.--> <a href="https://mariosouto.com/inputs-materializados-com-css/">Mario Souto</a>
/* Estrutura */ .input-container { position: relative; } input { border: 0; border-bottom: 2px solid #9e9e9e; outline: none; transition: .2s ease-in-out; box-sizing: border-box; } label { top: 0; left: 0; right: 0; color: #616161; display: flex; align-items: center; position: absolute; font-size: 1rem; cursor: text; transition: .2s ease-in-out; box-sizing: border-box; } input, label { width: 100%; height: 3rem; font-size: 1rem; } /* Interation */ input:valid, input:focus { border-bottom: 2px solid #26a69a; } input:valid + label, input:focus + label { color: #26a69a; font-size: .8rem; top: -30px; pointer-events: none; } /* Just for leave it a little more beautiful */ * { font-family: sans-serif; } body { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; background-color: #e0f2f1; } h1 { color: #616161; text-align: center; margin-bottom: 30px; } section { margin: 15px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); padding: 20px; border-radius: 0 0 2px 2px; background-color: #FFF; }

Related: See More


Questions / Comments: