Stylish underline when input is focused, modern browsers only
Using box-shadows on the input can let you have the same underlining effect without any wrapper or unsemantic markup + strip your CSS a lot :



input[type=text] {
  height:17px;
  border: 0;
  width: calc(100% - 2px);
  margin-left:1px;
  box-shadow: -8px 10px 0px -7px #ebebeb, 8px 10px 0px -7px #ebebeb;
  -webkit-transition: box-shadow 0.3s;
  transition: box-shadow 0.3s;
}
input[type=text]:focus {
  outline: none;
  box-shadow: -8px 10px 0px -7px #4EA6EA, 8px 10px 0px -7px #4EA6EA;
}
&lt;input placeholder="Search..." type="text" value=""/&gt;




For browser support :


box-shadows : IE9+
transitions : IE10+
calc() : IE9+