"Move Placeholder To Top on Focus And While Typing"
Bootstrap 3.0.0 Snippet by sumi9xm

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>hitgoalz</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class=" box"> <h2>Contect Us</h2> <form> <div> <input type="text" name="text" required=""> <label>Name</label> </div> <div> <input type="mail" name="mail" required=""> <label>Mail</label> </div> <div> <input type="password" name="password" required=""> <label>Password</label> </div> <div> <div> <textarea></textarea> <label>Message</label> </div> <input type="submit" value="Send"> </div> </form> </div> </body>
body { margin: 0px; padding: 0px; background-image: url(https://wallpaperscraft.com/image/street_city_evening_black_white_lights_buildings_hdr_25485_1920x1080.jpg); background-size: cover; background-repeat: no-repeat; } .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; background: #fff; padding: 40px; border: solid 1px rgba(0, 0, 0, o.2); box-sizing: border-box; box-shadow: 0 5px 10px rgba(0, 0, 0.2); } .box h2 { color: #EF5350; padding: 0px; text-transform: uppercase; } .box input { padding: 10px 0; margin-bottom: 30px; } .box textarea { height: 80px; padding: 10px; margin-bottom: 40px; } .box input, .box textarea{ width: 100%; box-sizing: border-box; box-shadow: none; outline: none; border: none; color:#999; border-bottom: 1px solid #999; } .box textarea { margin-bottom: 30px; color:#999; } .box input[type="submit"] { border-bottom: none; cursor: pointer; background: #EF5350; color: #fff; margin-bottom: 0px; text-transform: uppercase; border: none; } .box form div { position: relative; } .box form div label { position: absolute; top: 10px; color: #999; transition: .5s; pointer-events: none; } .box input:focus ~ label, .box textarea:focus ~ label, .box input:valid ~ label { top: -12px; left: 0px; color: #EF5350; font-size: 14px; font-weight: bold; } .box textarea label { top: -12px; left: 0px; color: #999; font-size: 14px; font-weight: bold; } .box input:focus, .box textarea:focus, .box input:valid, .box textarea:valid{ border-bottom: 1px solid #EF5350; }

Related: See More

Vue Argon Design System
Fading Side Menu - Lets Focus on Content
Dynamic form fields - Add new field on focus or change

Questions / Comments: