Animated Input Field

Animated Input Field

by rajnishw3

HTML

<h1 style="text-align:center;">Animated Headlines</h1>


<form action="">
  <div class="input-field">
    <input type="text" id="name" required />
    <label for="name">Your name:</label>
  </div>
</form>

CSS

form {
  margin: 100px;
}
.input-field {
  position: relative;
  width: 100%;
  height: 44px;
  line-height: 44px;
}
label {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  color: #d3d3d3;
  transition: 0.2s all;
}
input {
  width: 100%;
  border: 0;
  outline: 0;
  padding: 0;
  border-bottom: 2px solid #d3d3d3;
}
input:focus,
input:valid {
  border-color: #00dd22;
}
input:focus~label,
input:valid~label {
  top: -24px;
  color: #00dd22;
}