<div class="row"> <div class="small-12 medium-6 columns"> <div class="input-container"> <input type="text" placeholder="First Name" required> <label>First Name</label> <i class="fa fa-check"></i> </div> </div> <div class="small-12 medium-6 columns"> <div class="input-container"> <input type="text" placeholder="Last Name" required> <label>Last Name</label> <i class="fa fa-check"></i> </div> </div> </div> <div class="row"> <div class="small-12 medium-6 columns"> <div class="input-container"> <input type="email" pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" placeholder="Email Address" required> <label>Email Address</label> <i class="fa fa-check"></i> </div> </div> <div class="small-12 medium-6 columns"> <div class="input-container"> <input type="tel" pattern="^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]\d{3}[\s.-]\d{4}$" placeholder="Phone Number" required> <label>Phone Number - ###-###-####</label> <i class="fa fa-check"></i> </div> </div> </div> <div class="row"> <div class="small-12 medium-12 columns"> <div class="input-container"> <input type="text" placeholder="Street Address" required> <label>Street Address</label> <i class="fa fa-check"></i> </div> </div> </div> <div class="row"> <div class="small-12 medium-4 columns"> <div class="input-container"> <input type="text" placeholder="City" required> <label>City</label> <i class="fa fa-check"></i> </div> </div> <div class="small-12 medium-4 columns"> <div class="input-container"> <input pattern="[A-Za-z]{2}" type="text" placeholder="State" required> <label>State - ex. NY</label> <i class="fa fa-check"></i> </div> </div> <div class="small-12 medium-4 columns"> <div class="input-container"> <input pattern="[0-9]{5,10}" placeholder="Zip" required> <label>Zip</label> <i class="fa fa-check"></i> </div> </div> </div>
.input-container, .input-container > input, .input-container > label { box-sizing: border-box; line-height: 42px; height: 46px; /* This height is important and used throughout */ width: 100%; font-size: 1rem; display: inline-block; } .input-container { position: relative; } .input-container input { position: absolute; background-color: #eaeaea; border: none; padding: 0 8px; outline: none; } .input-container > label { display: block; position: absolute; padding: 0px 8px; top: 46px; /* Must match the height of the element */ overflow-y: hidden; height: 0; color: #eaeaea; background-color: #eaeaea; border-top-width: 0px; border-top-style: solid; border-top-color: #ffffff; border-bottom-width: 2px; border-bottom-style: solid; border-bottom-color: #777777; -webkit-transition: margin-top 0s ease-in, border-top 0s linear 0s; -moz-transition: margin-top 0s ease-in, border-top 0s linear 0s; -o-transition: margin-top 0s ease-in, border-top 0s linear 0s; transition: margin-top 0s ease-in, border-top 0s linear 0s; } /* Hide the input on focus, since the label is now showing */ .input-container input:focus[placeholder]::-webkit-input-placeholder { opacity: 0; } .input-container input:focus + label { margin: 0px 0; top: 0; margin-top: 46px; height: 46px; z-index: 100; border-top-width: 2px; border-top-color: #c77768; border-bottom-color: transparent; color: #8e8e8e; -webkit-transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; -moz-transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; -o-transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; } .input-container input:valid:focus + label { border-top-color: #73c768; border-bottom-color: transparent; color:#8e8e8e; -webkit-transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; -moz-transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; -o-transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; transition: color 0.05s 0.02s, margin-top 0.07s ease-out, border-top 0s linear 0.069s; } .input-container input:valid + label { border-top-color: transparent; border-top-width: 2px; border-bottom-color: #ffffff; -webkit-transition: margin-top 0s ease-in, border-top 0s linear 0s; -moz-transition: margin-top 0s ease-in, border-top 0s linear 0s; -o-transition: margin-top 0s ease-in, border-top 0s linear 0s; transition: margin-top 0s ease-in, border-top 0s linear 0s; } /* Basic styling */ body { width: 80%; height: 460px; margin: 3em auto; background-color: #ffffff; font-family: Arial; font-size: 16px; overflow-y: hidden; } .input-container { margin-bottom: 2.6em; } @media (min-width: 640px) { .input-container { margin-bottom: 0em; } .row { margin-bottom: 2.6em; } } .input-container input:valid { box-shadow: none; } .input-container input:invalid { outline: none; -moz-box-shadow: none; box-shadow: none; } .input-container input:focus { outline: none; border: none; box-shadow: none !important; background-color: #eaeaea; } .input-container input::-webkit-input-placeholder { color: #666666; } /* Icons These are a nice addition, though not required */ .input-container i { position: absolute; z-index: 110; right: 0.5em; line-height: 46px; color: #73c768; font-size: 1.5em; opacity: 0; display: none; transition: opacity 0.2s linear: } .input-container input:valid ~ i { opacity: 1; transition: opacity 0.2s linear; display: block; } .input-container input:valid:focus ~ i { opacity: 0; }