diff --git a/dist/ratchet.css b/dist/ratchet.css
index d171103..cdd00a5 100644
--- a/dist/ratchet.css
+++ b/dist/ratchet.css
@@ -499,10 +499,16 @@ input[type=search] {
   height: 34px;
   padding: 0 10px;
   font-size: 14px;
+  text-align: center;
   border-radius: 6px;
   border-width: 0;
   background-color: rgba(0, 0, 0, 0.1);
   box-sizing: border-box;
+  transition: text-align 1s linear;
+}
+
+input[type=search]:focus {
+  text-align: left;
 }
 
 textarea {
diff --git a/lib/sass/forms.scss b/lib/sass/forms.scss
index f0b41cc..b6c0b90 100644
--- a/lib/sass/forms.scss
+++ b/lib/sass/forms.scss
@@ -45,11 +45,15 @@ input[type=search] {
   height: 34px;
   padding: 0 10px;
   font-size: 14px;
+  text-align: center;
   border-radius: 6px;
   border-width: 0;
   background-color: rgba(0,0,0,.1);
   box-sizing: border-box; // Override content-box in normalize
 }
+input[type=search]:focus {
+  text-align: left;
+}
 
 // Allow text area's height to grow larger than a normal input
 textarea {
diff --git a/test/app/checkout.html b/test/app/checkout.html
index 2b21c58..28bed9d 100644
--- a/test/app/checkout.html
+++ b/test/app/checkout.html
@@ -24,6 +24,11 @@
     </a>
     <h1 class="title">Buy tickets</h1>
   </header>
+  <nav class="bar-standard bar-header-secondary">
+    <form>
+      <input type="search" placeholder="Search for movies">
+    </form>
+  </nav>
 
   <nav class="bar-tab">
     <ul class="tab-inner">