<div class="container">
<h1 class="text-center">
CSS only Input Label animation
</h1>
<div class="row">
<div class="col-8 col-md-6">
<div class="form-group">
<input id="name1" type="text" placeholder="Please enter something" required>
<label for="name1">Please enter something</label>
</div>
<div class="form-group">
<input id="name2" type="text" pattern=".{6,}" placeholder="Please enter something" required>
<label for="name2">Please enter at least 6 characters</label>
</div>
<div class="form-group">
<input id="name3" type="email" placeholder="Please enter something" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<label for="name3">Please enter email</label>
</div>
</div>
</div>
</div>
.row {
justify-content: center;
align-items: center;
}
.form-group {
margin: 2rem 0;
position:relative;
}
label {
position:absolute;
top:50%;
left:1rem;
transform: translate3d(0,-50%,0);
margin:0;
padding: 0;
transition: all .4s cubic-bezier(.05,.88,.36,.99);
opacity:0.5;
}
input {
display: block;
width: 100%;
padding: 0.75em;
margin:0;
box-sizing: border-box;
border: 1px solid silver;
border-radius: 4px;
background-color: transparent;
&::-webkit-input-placeholder {
color:transparent;
}
&:hover,
&:focus {
box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 1);
outline: none;
}
&:not(:placeholder-shown) ~ label {
top:-1em;
left:0;
font-size:75%;
}
&:valid {
border-color: limegreen;
}
&:not(:placeholder-shown):not(:valid) {
border-color: red;
}
}
View Compiled
This Pen doesn't use any external JavaScript resources.