Latest Design concept is the UI is Material Design. Most of the Mobile app design are Material. And all the Google Web and Mobile UI are now Material Design. Material Design is very Clean and Attractive for the user. Its will easily understand and easy to use by the user. Here I will give the Material Design Input Text for you. In that not need a jQuery script. This code is pure css and html only.
CSS:
.form-field{
position:relative;
margin-bottom:45px;
}
input{
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:300px;
border:none;
border-bottom:1px solid #9e9e9e;
}
input:focus{
outline:none;
border-bottom:0;
}
label{
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label{
top:-10px;
font-size:14px;
color:#26a69a;
}
.input-border{
position:relative;
display:block;
width:300px;
}
.input-border:before, .input-border:after {
content:'';
height:1px;
box-shadow: 0 1px 0 0 #26a69a;
width:0;
bottom:0px;
position:absolute;
background:#26a69a;
transition:0.2s ease all;
-moz-transition:0.2s ease all;
-webkit-transition:0.2s ease all;
}
.input-border:before {
left:50%;
}
.input-border:after {
right:50%;
}
input:focus ~ .input-border:before, input:focus ~ .input-border:after {
width:50%;
}
.input-label {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
input:focus ~ .input-label {
-webkit-animation:inputinput-labeler 0.3s ease;
-moz-animation:inputinput-labeler 0.3s ease;
animation:inputinput-labeler 0.3s ease;
}
@-webkit-keyframes inputinput-labeler {
from { background:#26a69a; }
to { width:0; background:transparent; }
}
@-moz-keyframes inputinput-labeler {
from { background:#26a69a; }
to { width:0; background:transparent; }
}
@keyframes inputinput-labeler {
from { background:#26a69a; }
to { width:0; background:transparent; }
}HTML:
<div class="form-field"> <input type="text" required> <span class="input-label"></span> <span class="input-border"></span> <label>Name</label> </div> <div class="form-field"> <input type="email" required> <span class="input-label"></span> <span class="input-border"></span> <label>Email</label> </div>
