A CodePen by Joshua Hibbert. Focused Input Trick - Works in IE8! Also, please keep in mind that this is just a demonstration of an interaction, and the actual usability is questionable (in this case).

index.html

<input id="search" type="search">
<label for="search">Search</label>

style.css

body {
  background-color: #ddd;
  color: #222;
  font: 100%/1.5 sans-serif;
  padding: 3em;
}
label {
  background-color: #fc6;
  border: .125em solid #222;
  cursor: pointer;
  display: inline-block;
  font-size: 1.5em;
  font-weight: bold;
  height: 2em; /* Required for IE */
  line-height: 2;
  margin-left: -.125em;
  padding: 0 1em;
  text-transform: uppercase;
  transition: .25s;
  vertical-align: top;
}
label:hover,
label:focus {
  background-color: #fa3;
}
input {
  border: .1875em solid #222;
  color: #222;
  display: inline-block;
  font: 1em/1.5 sans-serif; /* Firefox, Opera, and IE don't respect the line-height of input elements, instead using the normal value (i.e. between 1 and 1.2, but it varies depending on the typeface) */
  height: 1.5em; /* Required for Firefox, Opera, and IE */
  margin-right: -.25em;
  outline: 0;
  opacity: 0;
  padding: .75em 0;
  transition: .25s;
  width: 0;
  vertical-align: top;
}
input:focus {
  opacity: 1;
  padding-left: .75em;
  padding-right: .75em;
  width: 18em;
}