New .form-control class for simpler input styling

Form input styling is mostly left up to the browser default now.
A custom border, drop-shadow, and border-radius can be applied by
adding the `.form-control` class, which standardizes the appearance
of inputs, selects, and textareas.

The core reporting form, authentication forms, local alert forms,
contact form, and questionnaire form have all been updated to use
the new `.form-control` class.

23 files changed, 78 insertions, 126 deletions

diff --git a/t/cobrand/form_extras/templates/report/new/after_photo.html b/t/cobrand/form_extras/templates/report/new/after_photo.html
index b0c08ba20..89ab0b20c 100644
--- a/t/cobrand/form_extras/templates/report/new/after_photo.html
+++ b/t/cobrand/form_extras/templates/report/new/after_photo.html
@@ -2,11 +2,11 @@
 [% IF field_errors.address %]
 <p class='form-error'>[% field_errors.address %]</p>
 [% END %]
-<input type="text" value="[% report.get_extra_metadata('address') | html %]" name="address" id="form_address" required>
+<input class="form-control" type="text" value="[% report.get_extra_metadata('address') | html %]" name="address" id="form_address" required>
 
 <label for="form_passport">Passport number (optional)</label>
 [% IF field_errors.passport %]
 <p class='form-error'>[% field_errors.passport %]</p>
 [% END %]
-<input type="text" value="[% report.get_extra_metadata('passport') | html %]" name="passport" id="form_passport">
+<input class="form-control" type="text" value="[% report.get_extra_metadata('passport') | html %]" name="passport" id="form_passport">
 
diff --git a/templates/web/base/alert/_list.html b/templates/web/base/alert/_list.html
index f94ce84f8..388e0e9bc 100644
--- a/templates/web/base/alert/_list.html
+++ b/templates/web/base/alert/_list.html
@@ -88,7 +88,7 @@ for the county council.', "%s is the site name"), site_name) %]
 
   [% UNLESS c.user_exists %]
     <label for="rznvy">[% loc('Your email') %]</label>
-    <input type="text" id="rznvy" name="rznvy" value="[% rznvy | html %]">
+    <input class="form-control" type="text" id="rznvy" name="rznvy" value="[% rznvy | html %]">
   [% END %]
     <input id="alert_email_button" style="margin-top:1em;" class="green-btn" type="submit" name="alert" value="[% loc('Subscribe me to an email alert') %]">
 
diff --git a/templates/web/base/alert/index.html b/templates/web/base/alert/index.html
index 4965a1103..5c61e93d9 100644
--- a/templates/web/base/alert/index.html
+++ b/templates/web/base/alert/index.html
@@ -30,7 +30,7 @@ within a certain distance of a particular location.', "%s is the site name"), si
 <form method="get" action="/alert/list" class="form-box">
   <fieldset>
     <div class="form-txt-submit-box">
-      <input type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
+      <input class="form-control" type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
       <input class="green-btn" type="submit" value="[% loc('Go') %]">
     </div>
   </fieldset>
diff --git a/templates/web/base/alert/updates.html b/templates/web/base/alert/updates.html
index ecaed37ca..82e99d49a 100644
--- a/templates/web/base/alert/updates.html
+++ b/templates/web/base/alert/updates.html
@@ -19,7 +19,7 @@
         <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label>
 
         <div class="form-txt-submit-box">
-            <input type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]" placeholder="[% loc('Your email') %]">
+            <input class="form-control" type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]" placeholder="[% loc('Your email') %]">
             <input class="green-btn" type="submit" value="[% loc('Subscribe') %]">
         </div>
 
diff --git a/templates/web/base/auth/change_email.html b/templates/web/base/auth/change_email.html
index 58c864929..471782e42 100644
--- a/templates/web/base/auth/change_email.html
+++ b/templates/web/base/auth/change_email.html
@@ -24,7 +24,7 @@
 
     <div class="form-field">
         <label for="email">[% loc('New email address:') %]</label>
-        <input type="email" name="email" id="email" value="[% email | html %]">
+        <input class="form-control" type="email" name="email" id="email" value="[% email | html %]">
     </div>
     <div class="final-submit">
         <input type="submit" value="[% loc('Change email address') %]">
diff --git a/templates/web/base/auth/change_password.html b/templates/web/base/auth/change_password.html
index 80708abb1..50ecc93a2 100644
--- a/templates/web/base/auth/change_password.html
+++ b/templates/web/base/auth/change_password.html
@@ -17,7 +17,7 @@ INCLUDE 'header.html', title = loc('Change password'), bodyclass = bclass
 
 <form action="[% c.uri_for('change_password') %]" method="post" name="change_password" class="fieldset">
     <input type="hidden" name="token" value="[% csrf_token %]">
-    
+
     <fieldset>
     [% IF password_error;
 
@@ -26,18 +26,18 @@ INCLUDE 'header.html', title = loc('Change password'), bodyclass = bclass
             mismatch => loc('The passwords do not match'),
             other    => loc('Please check the passwords and try again'),
         };
-        
+
         loc_password_error = errors.$password_error || errors.other; %]
     <div class="form-error">[% loc_password_error %]</div>
     [% END %]
 
     <div class="form-field">
         <label for="new_password">[% loc('New password:') %]</label>
-        <input type="password" name="new_password" value="[% new_password | html %]">
+        <input class="form-control" type="password" name="new_password" value="[% new_password | html %]">
     </div>
     <div class="form-field">
         <label for="confirm">[% loc('Again:') %]</label>
-        <input type="password" name="confirm" value="[% confirm | html %]">
+        <input class="form-control" type="password" name="confirm" value="[% confirm | html %]">
     </div>
     <div class="final-submit">
         <input type="submit" value="[% loc('Change password') %]">
diff --git a/templates/web/base/auth/general.html b/templates/web/base/auth/general.html
index a8bf8f1e0..cf539ff4f 100644
--- a/templates/web/base/auth/general.html
+++ b/templates/web/base/auth/general.html
@@ -52,7 +52,7 @@
       [% ELSIF sign_in_error %]
         <div class="form-error">[% loc('There was a problem with your email/password combination. If you cannot remember your password, or do not have one, please fill in the &lsquo;sign in by email&rsquo; section of the form.') %]</div>
       [% END %]
-        <input type="email" class="required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]" autofocus>
+        <input type="email" class="form-control required email" id="email" name="email" value="[% email | html %]" placeholder="[% loc('Your email address') %]" autofocus>
 
         <div id="form_sign_in">
             <h3>[% tprintf(loc("Do you have a %s password?", "%s is the site name"), site_name)  %]</h3>
@@ -82,7 +82,7 @@
         <label class="hidden-js n" for="password_sign_in">[% loc('Password:') %]</label>
 
         <div class="form-txt-submit-box">
-            <input type="password" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+            <input type="password" name="password_sign_in" class="form-control" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
             <input class="green-btn" type="submit" name="sign_in" value="[% loc('Sign in') %]">
         </div>
 
@@ -104,7 +104,7 @@
         <h5>[% loc('<strong>No</strong> let me sign in by email') %]</h5>
 
         <label for="name">[% loc('Name') %]</label>
-        <input type="text" name="name" value="" placeholder="[% loc('Your name') %]">
+        <input class="form-control" type="text" name="name" value="" placeholder="[% loc('Your name') %]">
 
         <label for="password_register">[% loc('Password (optional)') %]</label>
 
@@ -113,7 +113,7 @@
         </div>
 
         <div class="form-txt-submit-box">
-            <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+            <input class="form-control" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
             <input class="green-btn" type="submit" name="email_sign_in" value="[% loc('Sign in') %]">
         </div>
     </div>
diff --git a/templates/web/base/contact/index.html b/templates/web/base/contact/index.html
index 86a0cec0d..536b95527 100644
--- a/templates/web/base/contact/index.html
+++ b/templates/web/base/contact/index.html
@@ -11,7 +11,7 @@
 [% ELSE %]
 <h1>[% loc('Contact the team') %]</h1>
 [% END %]
- 
+
 <form method="post" action="/contact/submit" class="validate">
     <fieldset>
         [% INCLUDE 'errors.html' %]
@@ -77,21 +77,21 @@
         [% IF field_errors.name %]
            <div class="form-error">[% field_errors.name %]</div>
         [% END %]
-        <input type="text" class="required" name="name" id="form_name" value="[% form_name | html %]" size="30">
+        <input type="text" class="form-control required" name="name" id="form_name" value="[% form_name | html %]" size="30">
 
 
         <label for="form_email">[% loc('Your email') %]</label>
         [% IF field_errors.em %]
            <div class="form-error">[% field_errors.em %]</div>
         [% END %]
-        <input type="text" class="required email" name="em" id="form_email" value="[% em | html %]" size="30">
+        <input type="text" class="form-control required email" name="em" id="form_email" value="[% em | html %]" size="30">
 
 
         <label for="form_subject">[% loc('Subject') %]</label>
         [% IF field_errors.subject %]
            <div class="form-error">[% field_errors.subject %]</div>
         [% END %]
-        <input type="text" class="required" name="subject" id="form_subject" value="[% subject | html %]" size="30">
+        <input type="text" class="form-control required" name="subject" id="form_subject" value="[% subject | html %]" size="30">
 
         [% INCLUDE 'contact/who.html' %]
 
@@ -99,7 +99,7 @@
         [% IF field_errors.message %]
            <div class="form-error">[% field_errors.message %]</div>
         [% END %]
-        <textarea class="required" name="message" id="form_message" rows="7" cols="50">[% message | html %]</textarea>
+        <textarea class="form-control required" name="message" id="form_message" rows="7" cols="50">[% message | html %]</textarea>
 
 
         <input class="final-submit green-btn" type="submit" value="[% loc('Post') %]">
diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html
index 52d5ed5b1..a93039827 100644
--- a/templates/web/base/questionnaire/index.html
+++ b/templates/web/base/questionnaire/index.html
@@ -70,7 +70,7 @@
 <p>[% loc('If you wish to leave a public update on the problem, please enter it here
 (please note it will not be sent to the council).') %]</p>
 
-<p><textarea name="update" rows="7" cols="30" placeholder="[% loc('What was your experience of getting the problem fixed?') %]">[% update | html %]</textarea></p>
+<p><textarea class="form-control" name="update" rows="7" cols="30" placeholder="[% loc('What was your experience of getting the problem fixed?') %]">[% update | html %]</textarea></p>
 
 [% IF c.cobrand.allow_photo_upload %]
     <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
diff --git a/templates/web/base/report/new/category.html b/templates/web/base/report/new/category.html
index ba6347d39..65bc485ab 100644
--- a/templates/web/base/report/new/category.html
+++ b/templates/web/base/report/new/category.html
@@ -5,7 +5,7 @@
     <label for='form_category' id="form_category_label">
         [%~ loc('Category') ~%]
     </label>[% =%]
-    <select name='category' id='form_category'>
+    <select class="form-control" name='category' id='form_category'>
         [%~ FOREACH cat_op IN category_options ~%]
         [% cat_op_lc = cat_op | lower =%]
         <option value='[% cat_op | html %]'[% ' selected' IF report.category == cat_op || category == cat_op_lc || (category_options.size == 2 AND loop.last) ~%]
diff --git a/templates/web/base/report/new/category_extras.html b/templates/web/base/report/new/category_extras.html
index 4d009f1ac..47d6b84e6 100644
--- a/templates/web/base/report/new/category_extras.html
+++ b/templates/web/base/report/new/category_extras.html
@@ -16,13 +16,13 @@
             [% END -%]
             [% IF meta.variable != 'false' %]
                 [% IF meta.exists('values') %]
-                    <select name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
+                    <select class="form-control" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
                         [% FOR option IN meta.values %]
                             <option value="[% option.key %]"[% IF option.key == report_meta.$meta_name.value %] selected[% END %]>[% option.name %]</option>
                         [% END %]
                     </select>
                 [% ELSE %]
-                    <input type="text" value="[% report_meta.$meta_name.value | html %]" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
+                    <input class="form-control" type="text" value="[% report_meta.$meta_name.value | html %]" name="[% meta_name %]" id="form_[% meta_name %]"[% meta.required == 'true' ? ' required' : '' %]>
                 [% END %]
             [% END %]
         [%- END %]
diff --git a/templates/web/base/report/new/category_wrapper.html b/templates/web/base/report/new/category_wrapper.html
index f6bb618f0..85b085999 100644
--- a/templates/web/base/report/new/category_wrapper.html
+++ b/templates/web/base/report/new/category_wrapper.html
@@ -1,7 +1,7 @@
 [% IF js %]
     <div id="form_category_row">
         <label for="form_category">[% loc('Category') %]</label>
-        <select name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select>
+        <select class="form-control" name="category" id="form_category" required><option>[% loc('Loading...') %]</option></select>
     </div>
 [% ELSE %]
     [% IF category_options.size %]
diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html
index 72d912f85..dfa4a0b47 100644
--- a/templates/web/base/report/new/form_report.html
+++ b/templates/web/base/report/new/form_report.html
@@ -11,7 +11,7 @@
 [% IF field_errors.title %]
     <p class='form-error'>[% field_errors.title %]</p>
 [% END %]
-    <input type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('10 inch pothole on Example St, near post box') %]" required>
+    <input class="form-control" type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% loc('10 inch pothole on Example St, near post box') %]" required>
 
 [% IF c.cobrand.allow_photo_upload %]
     <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
@@ -44,7 +44,7 @@
 [% IF field_errors.detail %]
     <p class='form-error'>[% field_errors.detail %]</p>
 [% END %]
-    <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('This pothole has been here for two months and…') %]" required>[% report.detail | html %]</textarea>
+    <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('This pothole has been here for two months and…') %]" required>[% report.detail | html %]</textarea>
 
 [% TRY %][% PROCESS 'report/new/inline-tips.html' %][% CATCH file %][% END %]
 
diff --git a/templates/web/base/report/new/form_user_loggedin.html b/templates/web/base/report/new/form_user_loggedin.html
index 0d0ceb11c..4935a6481 100644
--- a/templates/web/base/report/new/form_user_loggedin.html
+++ b/templates/web/base/report/new/form_user_loggedin.html
@@ -14,7 +14,7 @@
 
 [% BLOCK form_as %]
     <label for="form_as">[% loc('Report as') %]</label>
-    <select id="form_as" class="js-contribute-as" name="form_as">
+    <select id="form_as" class="form-control js-contribute-as" name="form_as">
         <option value="myself" selected>[% loc('Yourself') %]</option>
       [% IF js || can_contribute_as_another_user %]
         <option value="another_user">[% loc('Another user') %]</option>
@@ -26,7 +26,7 @@
 [% END %]
 
     <label for="form_email">[% loc('Email address') %]</label>
-    <input id="form_email"
+    <input class="form-control" id="form_email"
     [%- IF js OR can_contribute_as_another_user OR can_contribute_as_body -%]
     name="email"
     [%- ELSE -%]
@@ -46,7 +46,7 @@
     [% IF field_errors.name %]
         <p class='form-error'>[% field_errors.name %]</p>
     [% END %]
-    <input type="text" class="validName js-form-name" value="[% report.name | html %]" name="name" id="form_name">
+    <input type="text" class="form-control validName js-form-name" value="[% report.name | html %]" name="name" id="form_name">
 
     [%# if there is nothing in the name field then set check box as default on form %]
     <div class="checkbox-group">
@@ -55,7 +55,7 @@
     </div>
 
     <label for="form_phone">[% loc('Phone number (optional)') %]</label>
-    <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone">
+    <input class="form-control" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone">
 
     <div class="form-txt-submit-box">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]">
diff --git a/templates/web/base/report/new/form_user_loggedout_by_email.html b/templates/web/base/report/new/form_user_loggedout_by_email.html
index 87df57b00..409fd4bbf 100644
--- a/templates/web/base/report/new/form_user_loggedout_by_email.html
+++ b/templates/web/base/report/new/form_user_loggedout_by_email.html
@@ -14,7 +14,7 @@
         <p class='form-error'>[% field_errors.name %]</p>
     [% END %]
 
-    <input type="text" class="form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+    <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
 
     [%# if there is nothing in the name field then set check box as default on form %]
     <div class="checkbox-group">
@@ -23,7 +23,7 @@
     </div>
 
     <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label>
-    <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+    <input class="form-control form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
 
     <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label>
 
@@ -32,7 +32,7 @@
     </div>
 
     <div class="form-txt-submit-box form-focus-hidden">
-        <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+        <input class="form-control" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]">
     </div>
 </div>
diff --git a/templates/web/base/report/new/form_user_loggedout_email.html b/templates/web/base/report/new/form_user_loggedout_email.html
index e117bc275..39e9fd779 100644
--- a/templates/web/base/report/new/form_user_loggedout_email.html
+++ b/templates/web/base/report/new/form_user_loggedout_email.html
@@ -2,6 +2,6 @@
 [% IF field_errors.email %]
     <p class='form-error'>[% field_errors.email %]</p>
 [% END %]
-<input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]"
+<input class="form-control" type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]"
     [% IF required %]required[% END %]
     class="required">
diff --git a/templates/web/base/report/new/form_user_loggedout_password.html b/templates/web/base/report/new/form_user_loggedout_password.html
index 0f234aeba..a4d1aefe0 100644
--- a/templates/web/base/report/new/form_user_loggedout_password.html
+++ b/templates/web/base/report/new/form_user_loggedout_password.html
@@ -7,7 +7,7 @@
         <p class='form-error'>[% field_errors.password %]</p>
     [% END %]
     <div class="form-txt-submit-box">
-        <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
         <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]">
     </div>
 
diff --git a/templates/web/base/report/update/form_name.html b/templates/web/base/report/update/form_name.html
index ef8efd296..5d4c719ae 100644
--- a/templates/web/base/report/update/form_name.html
+++ b/templates/web/base/report/update/form_name.html
@@ -17,7 +17,7 @@
       [% END %]
     </select>
     <label for="form_email">[% loc('Email address') %]</label>
-    <input name="rznvy" id="form_email" type="text" value="[% c.user.email | html %]">
+    <input class="form-control" name="rznvy" id="form_email" type="text" value="[% c.user.email | html %]">
   [% END %]
 
 <label for="form_name">[% loc('Name') %]</label>
@@ -25,7 +25,7 @@
     <p class='form-error'>[% field_errors.name %]</p>
 [% END %]
 
-<input type="text" class="validName js-form-name"
+<input type="text" class="form-control validName js-form-name"
     name="name" id="form_name" value="[% update.name || c.user.name | html %]" placeholder="[% loc('Your name') %]">
 
 <div class="checkbox-group">
diff --git a/templates/web/zurich/report/new/fill_in_details_form.html b/templates/web/zurich/report/new/fill_in_details_form.html
index 9158fa090..77d764950 100644
--- a/templates/web/zurich/report/new/fill_in_details_form.html
+++ b/templates/web/zurich/report/new/fill_in_details_form.html
@@ -46,7 +46,7 @@
             [% IF field_errors.detail %]
                 <p class='form-error'>[% field_errors.detail %]</p>
             [% END %]
-            <textarea rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
+            <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
 
             [% PROCESS "report/new/category_wrapper.html" %]
 
@@ -54,19 +54,19 @@
                 [% IF field_errors.email %]
                     <p class='form-error'>[% field_errors.email %]</p>
                 [% END %]
-                <input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required>
+                <input class="form-control" type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required>
 
                 <label for="form_name">[% loc('Name') %] [% loc('(optional)') %]</label>
                 [% IF field_errors.name %]
                     <p class='form-error'>[% field_errors.name %]</p>
                 [% END %]
-                <input class="js-form-name" type="text" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+                <input class="form-control js-form-name" type="text" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
 
                 <label for="form_phone">[% loc('Phone number') %]</label>
                 [% IF field_errors.phone %]
                     <p class='form-error'>[% field_errors.phone %]</p>
                 [% END %]
-                <input type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]" required>
+                <input class="form-control" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]" required>
 
                 <div class="form-txt-submit-box">
                     [%# class of submit_sign_in so name can be optional, name of submit_register so it doesn't try and sign us in %]
diff --git a/web/cobrands/hart/hart.scss b/web/cobrands/hart/hart.scss
index 737dab4e9..37a48badf 100644
--- a/web/cobrands/hart/hart.scss
+++ b/web/cobrands/hart/hart.scss
@@ -7,15 +7,6 @@
 @import "../sass/mixins";
 @import "_colours";
 
-// Taken from Bromley's form css
-input[type=text],
-input[type=password],
-input[type=email],
-input[type=file],
-textarea,
-select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1dee8 #d1dee8 #768b9a; color: #333; font-family: "Gill Sans MT", "Gill Sans", Arial, 'Helvetica Neue', Helvetica, sans-serif; padding: 8px;
-@include border-radius(0); }
-
 .green-btn, button.green-btn, input.green-btn {
     background: #5b7189;
     border: 1px solid #8e9eb0;
@@ -30,9 +21,6 @@ select { background: #fff; border: 1px solid #768b9a; border-color: #768b9a #d1d
 .green-btn:hover, button.green-btn:hover, input.green-btn:hover {
     background: #5b7189; border: 1px solid #8e9eb0;
 }
-.form-txt-submit-box input[type=submit] {
-    padding-top: 0; padding-bottom: 0; width: auto;
-}
 
 
 h1, h2, h3, h4, h5, h6, legend { font-family: 'Gill Sans MT', 'Gill Sans', 'Trebuchet MS', Calibri, sans-serif; }
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 7bc4e0210..eb7708218 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -10,6 +10,8 @@ $itemlist_item_background: #f6f6f6 !default;
 $itemlist_item_background_hover: #e6e6e6 !default;
 $col_big_numbers: #ccc !default;
 
+$form-control-border-color: #aaaaaa;
+
 @import "_mixins";
 @import "_report_list";
 
@@ -222,38 +224,6 @@ h4.static-with-rule{
 
 /* FORMS */
 
-// input placeholders, these need to be on separate lines as if the browser
-// can't understand a selector it will invalidate the whole line.
-::-webkit-input-placeholder {
-  color: #666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-:-moz-placeholder {
-  color:#666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-:-ms-placeholder {
-  color:#666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-//this only gets used when the browser doesn't support @placeholder
-.placeholder {
-  color:#666666;
-  font: {
-    style:italic;
-    size:0.9375em;
-  }
-}
-
 input[type=file] {
     width: 100%;
 }
@@ -263,42 +233,20 @@ input[type=password],
 input[type=email],
 textarea {
   @include box-sizing(border-box);
+  display: block;
   width: 100%;
-  // adjust so the sides line up
   padding: 0.5em;
-}
-.ie7 {
-    input[type=text],
-    input[type=password],
-    input[type=email],
-    textarea {
-        max-width: 95%;
-    }
-}
-
-textarea {
-  border: 0.125em solid #888888;
-  @include border-radius(0.25em);
-  display: block;
-  font-size: 1em;
-  line-height: 1.5em;
-  font-family: $meta-font;
-  min-height:8em;
-}
-
-input[type=text],
-input[type=password],
-input[type=email] {
-  border: 0.125em solid #888888;
-  @include border-radius(0.25em);
-  display: block;
   font-size: 1em;
   line-height: 1em;
+
+  .ie7 & {
+    max-width: 95%;
+  }
 }
 
-input[readonly] {
-  border-color: #cccccc;
-  color: #888888;
+textarea {
+  line-height: 1.5em;
+  min-height: 8em;
 }
 
 label{
@@ -317,6 +265,25 @@ label{
   }
 }
 
+.form-control {
+    display: block;
+    background-color: #fff;
+    border: 1px solid $form-control-border-color;
+    @include border-radius(4px);
+    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
+    font-family: inherit; // eg: stop Firefox and IE10-11 using Courier in textareas
+
+    &[readonly] {
+        box-shadow: none;
+        color: #888888;
+    }
+}
+
+select.form-control {
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+    height: 2.2em; // roughly equal to default input height
+}
+
 // grey background, full width box
 .form-box {
   margin: 0 -1em 0.25em;
@@ -387,8 +354,8 @@ label{
     float: $right;
     width:28%;
     margin-#{$right}: 0.25em;
-    padding-top:0.7em;
-    padding-bottom:0.6em;
+    padding-top:0.6em;
+    padding-bottom:0.5em;
   }
 }
 
diff --git a/web/cobrands/sass/_dropzone.scss b/web/cobrands/sass/_dropzone.scss
index 3e5fc8058..432f7f6b4 100644
--- a/web/cobrands/sass/_dropzone.scss
+++ b/web/cobrands/sass/_dropzone.scss
@@ -1,18 +1,15 @@
 $dropzone-link-color: #0BA7D1; // match default `a` styling
 $dropzone-link-color--awakened: #0D7CCE; // match default `a:hover` styling
-$dropzone-border-color: #888; // match default form inputs
 $dropzone-border-color--awakened: $dropzone-link-color--awakened;
 $dropzone-border-color--full: #bf002a;
-$dropzone-border-radius: 0.25em; // match default form inputs
 $dropzone-background-color: #fff;
 $dropzone-background-color--awakened: mix($dropzone-link-color, $dropzone-background-color, 10%);
 $dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-background-color, 10%);
 
 .dropzone {
+  @extend .form-control;
   @include clearfix;
-  border: 0.125em solid $dropzone-border-color;
   background-color: $dropzone-background-color;
-  border-radius: $dropzone-border-radius;
   padding: 1.5em;
   text-align: center;
 }
@@ -55,7 +52,7 @@ $dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-ba
   cursor: auto;
 
   &:hover {
-    border-color: $dropzone-border-color;
+    border-color: $form-control-border-color;
     background-color: $dropzone-background-color;
 
     .dz-remove,
@@ -111,7 +108,7 @@ $dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-ba
   right: 0;
   bottom: 0;
 
-  border-radius: $dropzone-border-radius;
+  border-radius: 4px;
   overflow: hidden; // crop child image to border radius, even before img src has loaded
 
   img {
@@ -144,7 +141,7 @@ $dropzone-background-color--full: mix($dropzone-border-color--full, $dropzone-ba
 
   .dz-upload {
     background: rgba(0,0,0,0.2);
-    border-radius: $dropzone-border-radius;
+    border-radius: 4px;
     height: 100%;
     width: 0;
     display: block;
diff --git a/web/cobrands/sass/_h5bp.scss b/web/cobrands/sass/_h5bp.scss
index b41effa1b..9b1c56ab5 100644
--- a/web/cobrands/sass/_h5bp.scss
+++ b/web/cobrands/sass/_h5bp.scss
@@ -37,8 +37,8 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 10
 body { margin: 0; font-size: 1em; line-height: 1.5; }
 
 /* mySociety addition: background colour */
-body, button, input, select, textarea {
-    font-family: sans-serif; 
+body, button {
+    font-family: sans-serif;
     color: #222;
     background-color: #fff
 }