diff --git a/ionic/components/search-bar/extensions/ios.scss b/ionic/components/search-bar/extensions/ios.scss
index 912eee0ada..b29dbb6201 100644
--- a/ionic/components/search-bar/extensions/ios.scss
+++ b/ionic/components/search-bar/extensions/ios.scss
@@ -52,7 +52,7 @@ $search-bar-ios-background-size:      13px 13px !default;
     transition: all .2s ease;
   }
 
-  .search-bar-input-container.focused {
+  .search-bar-input-container.left-align {
     .search-bar-icon {
       transform: translateX(0);
       -webkit-transform: translateX(0);
diff --git a/ionic/components/search-bar/search-bar.js b/ionic/components/search-bar/search-bar.js
index 57fd7b5dbb..7a23c44a2b 100644
--- a/ionic/components/search-bar/search-bar.js
+++ b/ionic/components/search-bar/search-bar.js
@@ -22,9 +22,10 @@ import {IonicComponent} from 'ionic/config/component'
 })
 @View({
   template: `
-  <div class="search-bar-input-container" [class.focused]="isFocused">
+  <div class="search-bar-input-container" [class.left-align]="shouldLeftAlign">
     <div class="search-bar-icon"></div>
-    <input (focus)="inputFocused()" (blur)="inputBlurred()" (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
+    <input (focus)="inputFocused()" (blur)="inputBlurred()"
+    (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
   </div>
   <button class="button search-bar-cancel">{{ cancelText }}</button>`
 })
@@ -65,9 +66,11 @@ export class SearchBar {
 
   inputFocused() {
     this.isFocused = true;
+    this.shouldLeftAlign = true;
   }
   inputBlurred() {
     this.isFocused = false;
+    this.shouldLeftAlign = this.value.trim() != '';
   }
 }