"Floating Input labels"
Bootstrap 4.1.1 Snippet by Arjunverma

Post to Facebook Tweet this

<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 ----------> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <title>Create html form</title> </head> <body> <div class="container"> <form class="mt-5"> <div class="floating-form"> <div class="floating-label"> <input class="floating-input" type="tel" placeholder=" "> <span class="highlight"></span> <label>Text</label> </div> <div class="floating-label"> <input class="floating-input" type="text" onclick="(this.type='time')" placeholder=" "> <span class="highlight"></span> <label>Time</label> </div> <div class="floating-label"> <input class="floating-input" type="text" onclick="(this.type='date')" placeholder=" "> <span class="highlight"></span> <label>Date</label> </div> <div class="floating-label"> <input class="floating-input" type="password" placeholder=" "> <span class="highlight"></span> <label>Password</label> </div> <div class="floating-label"> <select class="floating-select" onclick="this.setAttribute('value', this.value);" value=""> <option value=""></option> <option value="1">Alabama</option> <option value="2">Boston</option> <option value="3">Ohaio</option> <option value="4">New York</option> <option value="5">Washington</option> </select> <span class="highlight"></span> <label>Select</label> </div> <div class="floating-label"> <textarea class="floating-input floating-textarea" placeholder=" "></textarea> <span class="highlight"></span> <label>Textarea</label> </div> </div> </form> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </body> </html>
.floating-form { width:320px; } /**** floating-Lable style start ****/ .floating-label { position:relative; margin-bottom:20px; } .floating-input , .floating-select { font-size:14px; padding:4px 4px; display:block; width:100%; height:30px; background-color: transparent; border:none; border-bottom:1px solid #757575; } .floating-input:focus , .floating-select:focus { outline:none; border-bottom:2px solid #5264AE; } .floating-form label { color:#999; font-size:14px; font-weight:normal; position:absolute; pointer-events:none; left:5px; top:5px; transition:0.2s ease all; -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all; } .floating-input:focus ~ label, .floating-input:not(:placeholder-shown) ~ label { top:-18px; font-size:14px; color:#5264AE; } .floating-select:focus ~ label , .floating-select:not([value=""]):valid ~ label { top:-18px; font-size:14px; color:#5264AE; } /* active state */ .floating-input:focus ~ .bar:before, .floating-input:focus ~ .bar:after, .floating-select:focus ~ .bar:before, .floating-select:focus ~ .bar:after { width:50%; } .floating-form .floating-textarea { min-height: 30px; max-height: 260px; overflow:hidden; overflow-x: hidden; } /* highlighter */ .floating-form .highlight { position:absolute; height:50%; width:100%; top:15%; left:0; pointer-events:none; opacity:0.5; } /* active state */ .floating-input:focus ~ .highlight , .floating-select:focus ~ .highlight { -webkit-animation:inputHighlighter 0.3s ease; -moz-animation:inputHighlighter 0.3s ease; animation:inputHighlighter 0.3s ease; } /* animation */ @-webkit-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @-moz-keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } @keyframes inputHighlighter { from { background:#5264AE; } to { width:0; background:transparent; } } .floating-credit { position:fixed; bottom:10px; right:10px; color:#aaa; font-size:13px; } .floating-credit a { text-decoration:none; color:#000000; font-weight:bold; } .floating-credit a:hover { border-bottom:1px dotted #f8f8f8; } .floating-heading { position:fixed; color:#aaa; font-size:20px; font-family:arial,sans-serif; }

Related: See More

Light Bootstrap Dashboard React
plus minus counter input
Simple input spinner controls
Custom Search input

Questions / Comments: