Material Design Inspired Input

HTML Code:

<form>
  <input type=text id="name" required>
  <label for="name">Name</label>
  <span class="bot-line"></span>
  <span class="right-line"></span>
<form>

CSS Code:

body {
  font-family: 'Droid Serif', serif;
  font-weight: 700;
  background-color: #f9f9f9;
}

form {
  position: relative;
  left: 50%;
  margin-left: -123px;
  margin-top: 200px;
}

#name {
  -webkit-appearance: none;
  position: relative;
  padding: 10px 50px 10px 5px;
  border: none;
  text-transform: uppercase;
  font-size: 16px;
  font-family: 'Droid Serif', serif;
  font-weight: 700;
  background-color: #f9f9f9;
  color: #8f9598;
  -webkit-font-smoothing: antialiased;
  letter-spacing: 1px;
  
  &:focus {
    outline: none;
  }
}

label {
  position: absolute;
  left: 4px;
  top: 50%;
  margin-top: -9.5px;
  -webkit-font-smoothing: antialiased;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8f9598;
  
  transition: left 250ms ease, color 250ms ease;
}

input:focus ~ label, input:valid ~ label {
  left: -64px;
  color: #d3d3d3;
}

.bot-line {
  display: block;
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 246px;
  height: 1px;
  background-color: #ec503b;
  
  &:after {
    display: block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #ec503b;
    
    transition: width 250ms 250ms ease;
  }
}

.right-line {
  display: inline-block;
  content: '';
  position: absolute;
  top: 0;
  left: 246px;
  height: 39px;
  width: 1px;
  background-color: #ec503b;
  
  &:after {
    display: inline-block;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 0;
    width: 3px;
    background-color: #ec503b;
    
    transition: height 250ms ease;
  }
}

input:focus ~ {
  .bot-line:after {
     width: 246px;
    
     transition: width 250ms ease;
  }

  .right-line:after {
      height: 39px;

      transition: height 250ms 250ms ease;
  }
}

 

Demo:

See the Pen Material design inspired input (WIP) by Eric Grucza (@egrucza) on CodePen.