diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index d10df4f71e..fc737976f7 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2476,11 +2476,34 @@ div.topic_edit_spinner .loading_indicator_spinner {
     height: 20px;
 }
 
-#invitee_emails {
+textarea.invitee_emails {
     min-height: 40px;
     max-height: 300px;
     width: 96%;
     max-width: 96%;
+
+    color: hsl(0, 0%, 33%);
+    background-color: hsl(0, 0%, 100%);
+    border-radius: 4px;
+    vertical-align: middle;
+    border: 1px solid hsl(0, 0%, 80%);
+    padding: 4px 6px;
+
+    box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075);
+    transition: border linear 0.2s, box-shadow linear 0.2s;
+
+    &:focus {
+        border-color: hsla(206.5, 80%, 62%, 0.8);
+        outline: 0;
+
+        box-shadow: inset 0 1px 1px hsla(0, 0%, 0%, 0.075),
+            0 0 8px hsla(206.5, 80%, 62%, 0.6);
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        background-color: hsl(0, 0%, 93%);
+    }
 }
 
 #invite-user {
diff --git a/static/templates/invite_user.hbs b/static/templates/invite_user.hbs
index acb4e4d005..f9111d570d 100644
--- a/static/templates/invite_user.hbs
+++ b/static/templates/invite_user.hbs
@@ -14,7 +14,7 @@
                 <div class="input-group">
                     <label for="invitee_emails">{{t "Emails (one on each line or comma-separated)" }}</label>
                     <div>
-                        <textarea rows="2" id="invitee_emails" name="invitee_emails" placeholder="{{t 'One or more email addresses...' }}"></textarea>
+                        <textarea rows="2" id="invitee_emails" name="invitee_emails" class="invitee_emails" placeholder="{{t 'One or more email addresses...' }}"></textarea>
                         {{#if is_admin}}
                         <div id="invite-method-choice">
                             {{t "or" }} <a role="button" tabindex="0" id="generate_multiuse_invite_button">{{t "Generate invite link" }}</a>