Stylish focus effect on input text using CSS3

by akogch

HTML

<br />
<div class="container">
  <input class="input" id="txtFirstName" type="text" placeholder="First Name">
  <span class="border"></span>
</div>
<br />
<div class="container">
  <input class="input" id="txtLastName" type="text" placeholder="Last Name">
  <span class="border"></span>
</div>

CSS

body {
  background-color: #fff;
}

:focus {
  outline: none;
}

.container {
  width: 200px;
  position: relative;
}

input[type="text"] {
  width: 100%;
}

.input {
  border: 0;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
}

.input ~ .border {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #27ad8a;
}

.input:focus ~ .border {
  width: 100%;
  transition: 0.5s;
}