Bootstrap-mdb input Basic CSS & JS

html*****************************

<div class= "Row" >
<div class= "Col-md-6 mb-r" >
<div class= "Md-form" >
<input class= "Form-control" type= "text" >
<label for= "" class= "" > Pass rate </label>
</div>
</div>
</div>

<style>*****************************

@media (min-width:992px) {
. mb-r {
Margin-bottom:3rem!important;
}
}

. md-form {
position:relative;
Margin-bottom:1.8rem;
}
Input[type=date], input[type=datetime-local], Input[type=email], Input[type=number], Input[type=password], INPUT[TYPE=SEARCH-MD], Input[type=search], Input[type=tel], Input[type=text], Input[type=time], Input[type=url], Textarea.md-textarea {
background-color:transparent;
Border:none;
border-bottom:1px solid #bdbdbd;
border-radius:0;
outline:0;
Height:2.1rem;
width:100%;
Font-size:1rem;
-webkit-box-shadow:none;
Box-shadow:none;
-webkit-box-sizing:content-box;
Box-sizing:content-box;
-webkit-transition:all. 3s;
Transition:all. 3s;
}
input{
Font:inherit;
margin:0;
}

Input[type=date]+label:after, Input[type=datetime-local]+label:after, Input[type=email]+label:after, input[type= Number]+label:after, Input[type=password]+label:after, Input[type=search-md]+label:after, input[type=search]+ Label:after, Input[type=tel]+label:after, Input[type=text]+label:after, Input[type=time]+label:after, input[type= Url]+label:after, Textarea.md-textarea+label:after {
Display:block;
Content: "";
Position:absolute;
top:65px;
opacity:0;
-webkit-transition:. 2s opacity ease-out,.2s color ease-out;
Transition:. 2s opacity ease-out,.2s color ease-out;
}
Input[type=date]+label:after, Input[type=datetime-local]+label:after, Input[type=email]+label:after, input[type= Number]+label:after, Input[type=password]+label:after, Input[type=search-md]+label:after, input[type=search]+ Label:after, Input[type=tel]+label:after, Input[type=text]+label:after, Input[type=time]+label:after, input[type= Url]+label:after, Textarea.md-textarea+label:after {
Display:block;
Content: "";
Position:absolute;
top:65px;
opacity:0;
-webkit-transition:. 2s opacity ease-out,.2s color ease-out;
Transition:. 2s opacity ease-out,.2s color ease-out;
}
. Md-form Label {
-webkit-transition:. 2s ease-out;
Transition:. 2s ease-out;
Color: #757575;
Position:absolute;
Top:. 8rem;
left:0;
Font-size:1rem;
Cursor:text;
}
. Md-form label.active{
Transform:translatey (-140%);
Font-size:. 8rem;
}
. form-control:focus{
background:0 0;
}
Input[type=text]:focus:not ([redonly]) {
border-bottom:1px solid #4285f4;
box-shadow:0 1px 0 0 #4285f4;
}
Input[type=text]:focus:not ([redonly]) +label{
Color: #4285f4;
}

</style>

js********************************************

<script>

$ (function () {
var input_selector = ["Text", "password", "email", "url", "tel", "number", "Search", "SEARCH-MD"].map (function (selector) {

Return "input[type=" + selector + "]";
}). Join (",") + ", textarea";

$ (document). On (' Focus ', input_selector, function (e) {

$ (e.target). Siblings (' label, I '). addclass (' active ');
});

　　　　$ (document). On (' Blur ', Input_selector, function (e) {

var $this = $ (e.target);
var novalue =! $this. val ();
var invalid =!e.target.validity.badinput;
var noplaceholder = $this. attr ("placeholder") = = = undefined;

if (novalue && invalid && noplaceholder)
$this. Siblings (' label, I '). Removeclass (' active ');
//
Validate_field ($this);
});

})

</script>

Bootstrap-mdb input Basic CSS & JS