<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 ----------> <div class="container"> <div class="input-text-wrap is-full-width" style="" role="phoneContainer"> <label class="input-text-label" for="phoneContainer-input-id" role="label"> Phone Number </label> <input class="input-text" data-field="" id="phoneContainer-input-id" type="text" role="input" value="5095908734" maxlength=""> <span class="input-info danger hidden" role="error"> </span> <span class="input-info hidden" role="info"> </span> </div> </div>

.input-text-wrap [type="text"], .input-text-wrap [type="password"], .input-text-wrap [type="number"], .input-text-wrap [type="email"], .input-text-wrap [type="tel"] { font-family: "Proxima Nova", Helvetica, sans-serif; font-style: normal; font-weight: 300; display: block; width: 100%; padding: 0; font-size: 13px; line-height: 24px; color: #294661; background-color: transparent; border: 0; border-bottom: 1px solid #d4dadf; box-shadow: transparent 0 1px 0; transition: 0.3s border-color, 0.3s box-shadow; } .input-text-wrap[type="text"]:focus, .input-text-wrap[type="password"]:focus, .input-text-wrap[type="number"]:focus, .input-text-wrap[type="email"]:focus, .input-text-wrap[type="tel"]:focus { border-color: #1a82e2; box-shadow: #1a82e2 0 1px 0; } .input-text-label { position: absolute; top: 18px; display: inline-block; font-size: 13px; line-height: 18px; pointer-events: none; transition: 0.3s top, 0.3s font-size; transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1); } .input-text-wrap.is-full-width { width: 100%; max-width: 100%; } .input-text-wrap { position: relative; padding-top: 15px; margin-bottom: 20px; }