<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="field-container"> <input type="text" class="field" required placeholder="First name"/> <label class="floating-label">First name</label> </div> <div class="field-container"> <input type="text" class="field" required placeholder="Last name"/> <label class="floating-label">Last name</label> </div> <div class="field-container"> <select class="field" placeholder="Options"> <option></option> <option>option 1</option> <option>option 2</option> </select> <label class="floating-label">Options</label> </div>

.field-container { position: relative; width: 300px; margin-top:20px; font-family: 'Roboto', sans-serif; } .field { display:block; width:100%; padding:15px 10px 0; //border:none; font-size:14px; } .field:focus { outline: 0; } .floating-label { position:absolute; pointer-events:none; top: 15px; left:5px; font-size: 10px; opacity:0; background-color: transparent; padding: 0 2px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .field:valid + .floating-label { opacity:1; top:-15px; color: #9e9e9e; } .field:focus + .floating-label { color: #03a9f4; } .field-underline { position:absolute; top:0; left:0; right:0; bottom:-5px; border:1px solid #9e9e9e; z-index: -1; padding:10px 10px 0; } .field:focus + .floating-label + .field-underline { border-color:#03a9f4; }