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 Textarea 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;
}
textarea{
font-size:18px;
padding:10px 10px 10px 5px;
display:block;
width:100%;
border:none;
border-bottom:1px solid #9e9e9e;
font-family:arial;
font-weight:normal
}
textarea: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;
}
textarea:focus ~ label, textarea:valid ~ label{
top:-10px;
font-size:14px;
color:#26a69a;
}
.txtara-border{
position:relative;
display:block;
width:100%;
}
.txtara-border:before, .txtara-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;
}
.txtara-border:before {
left:50%;
}
.txtara-border:after {
right:50%;
}
textarea:focus ~ .txtara-border:before, textarea:focus ~ .txtara-border:after {
width:50%;
}
.txt-title-label {
position:absolute;
height:60%;
width:100px;
top:25%;
left:0;
pointer-events:none;
opacity:0.5;
}
textarea:focus ~ .txt-title-label {
-webkit-animation:txtara-lab-labeler 0.3s ease;
-moz-animation:txtara-lab-labeler 0.3s ease;
animation:txtara-lab-labeler 0.3s ease;
}
@-webkit-keyframes txtara-lab-labeler {
from { background:#26a69a; }
to { width:0; background:transparent; }
}
@-moz-keyframes txtara-lab-labeler {
from { background:#26a69a; }
to { width:0; background:transparent; }
}
@keyframes txtara-lab-labeler {
from { background:#26a69a; }
to { width:0; background:transparent; }
}HTML:
<div class="form-field"> <textarea required></textarea> <span class="txt-title-label"></span> <span class="txtara-border"></span> <label>Address</label> </div> <div class="form-field"> <textarea required></textarea> <span class="txt-title-label"></span> <span class="txtara-border"></span> <label>Description</label> </div>
