diff --git a/src/components/input/demoErrors/index.html b/src/components/input/demoErrors/index.html
index 6c30968fde4..fd28e89937d 100644
--- a/src/components/input/demoErrors/index.html
+++ b/src/components/input/demoErrors/index.html
@@ -40,7 +40,7 @@ <h1 class="md-toolbar-tools">
       <md-input-container>
         <label>Hourly Rate (USD)</label>
         <input required type="number" step="any" name="rate" ng-model="project.rate" min="800"
-               max="4999" ng-pattern="/^1234$/">
+               max="4999" ng-pattern="/^1234$/" md-maxlength="20" />
 
         <div ng-messages="projectForm.rate.$error" multiple>
           <div ng-message="required">
diff --git a/src/components/input/input-theme.scss b/src/components/input/input-theme.scss
index 1671c837da5..f6f8930da3b 100644
--- a/src/components/input/input-theme.scss
+++ b/src/components/input/input-theme.scss
@@ -20,7 +20,9 @@ md-input-container.md-THEME_NAME-theme {
   ng-message, data-ng-message, x-ng-message,
   [ng-message], [data-ng-message], [x-ng-message],
   [ng-message-exp], [data-ng-message-exp], [x-ng-message-exp] {
-    color: '{{warn-500}}';
+    :not(.md-char-counter) {
+      color: '{{warn-500}}';
+    }
   }
 
   &:not(.md-input-invalid) {
diff --git a/src/components/input/input.js b/src/components/input/input.js
index 2f4b158cda1..019a436688d 100644
--- a/src/components/input/input.js
+++ b/src/components/input/input.js
@@ -362,7 +362,25 @@ function mdMaxlengthDirective($animate) {
     // Stop model from trimming. This makes it so whitespace
     // over the maxlength still counts as invalid.
     attr.$set('ngTrim', 'false');
-    input.after(charCountEl);
+
+    var ngMessagesSelectors = [
+      'ng-messages',
+      'data-ng-messages',
+      'x-ng-messages',
+      '[ng-messages]',
+      '[data-ng-messages]',
+      '[x-ng-messages]'
+    ];
+
+    var ngMessages = containerCtrl.element[0].querySelector(ngMessagesSelectors.join(','));
+
+    // If we have an ngMessages container, put the counter at the top; otherwise, put it after the
+    // input so it will be positioned properly in the SCSS
+    if (ngMessages) {
+      angular.element(ngMessages).prepend(charCountEl);
+    } else {
+      input.after(charCountEl);
+    }
 
     ngModelCtrl.$formatters.push(renderCharCount);
     ngModelCtrl.$viewChangeListeners.push(renderCharCount);
diff --git a/src/components/input/input.scss b/src/components/input/input.scss
index eb23f5277f2..21fd2f3462f 100644
--- a/src/components/input/input.scss
+++ b/src/components/input/input.scss
@@ -166,8 +166,8 @@ md-input-container {
   }
 
   .md-char-counter {
-    position: absolute;
-    right: 0;
+    position: relative;
+    text-align: right;
     order: 3;
   }
 
@@ -176,6 +176,12 @@ md-input-container {
     position: relative;
     order: 4;
     min-height: $input-error-height;
+
+    .md-char-counter {
+      position: absolute;
+      top: 0;
+      right: 0;
+    }
   }
 
   ng-message, data-ng-message, x-ng-message,