Expandable Search Field

Expandable Search Field.markdown

Expandable Search Field

A Pen by Joey Hayes on CodePen.

License.

index.html

<div class="top-bar">
  <div class="left">
    
  </div>
  
  <div class="right">
    <form class="search-form">
      <input type="text" name="search" placeholder="Search" />
    </form>  
  </div>
</div>  

style.css

.top-bar {
  background: lightblue;
  padding: 0.4rem;
}
.top-bar:before {
  content: "";
  display: table;
}
.top-bar:after {
  content: "";
  display: table;
  clear:both;
}
.search-form {
  float: right;
}
.search-form input[name="search"] {
  border-radius: 0.3rem;
  border: 1px solid #aaa;
  padding: 0.5rem 0.4rem;
  font-size: 1.1rem;
  width: 180px;
  transition: width 0.3s ease-in-out;
}

.search-form input[name="search"]:focus {
  width: 300px;
  outline: 0;
}