diff --git a/js/admin/dist/app.js b/js/admin/dist/app.js
index 16071a43a..62ca44abf 100644
--- a/js/admin/dist/app.js
+++ b/js/admin/dist/app.js
@@ -17834,8 +17834,8 @@ System.register('flarum/components/AppearancePage', ['flarum/components/Page', '
                     m(
                       'div',
                       { className: 'AppearancePage-colors-input' },
-                      m('input', { className: 'FormControl', placeholder: '#aaaaaa', value: this.primaryColor(), onchange: m.withAttr('value', this.primaryColor) }),
-                      m('input', { className: 'FormControl', placeholder: '#aaaaaa', value: this.secondaryColor(), onchange: m.withAttr('value', this.secondaryColor) })
+                      m('input', { className: 'FormControl', type: 'color', placeholder: '#aaaaaa', value: this.primaryColor(), onchange: m.withAttr('value', this.primaryColor) }),
+                      m('input', { className: 'FormControl', type: 'color', placeholder: '#aaaaaa', value: this.secondaryColor(), onchange: m.withAttr('value', this.secondaryColor) })
                     ),
                     Switch.component({
                       state: this.darkMode(),
diff --git a/js/admin/src/components/AppearancePage.js b/js/admin/src/components/AppearancePage.js
index 92bbc1b93..8e35a958a 100644
--- a/js/admin/src/components/AppearancePage.js
+++ b/js/admin/src/components/AppearancePage.js
@@ -28,8 +28,8 @@ export default class AppearancePage extends Page {
               </div>
 
               <div className="AppearancePage-colors-input">
-                <input className="FormControl" placeholder="#aaaaaa" value={this.primaryColor()} onchange={m.withAttr('value', this.primaryColor)}/>
-                <input className="FormControl" placeholder="#aaaaaa" value={this.secondaryColor()} onchange={m.withAttr('value', this.secondaryColor)}/>
+                <input className="FormControl" type="color" placeholder="#aaaaaa" value={this.primaryColor()} onchange={m.withAttr('value', this.primaryColor)}/>
+                <input className="FormControl" type="color" placeholder="#aaaaaa" value={this.secondaryColor()} onchange={m.withAttr('value', this.secondaryColor)}/>
               </div>
 
               {Switch.component({
diff --git a/js/forum/dist/app.js b/js/forum/dist/app.js
index 1e71e9705..21bdc8d2f 100644
--- a/js/forum/dist/app.js
+++ b/js/forum/dist/app.js
@@ -26653,6 +26653,7 @@ System.register('flarum/components/Search', ['flarum/Component', 'flarum/compone
                 'div',
                 { className: 'Search-input' },
                 m('input', { className: 'FormControl',
+                  type: 'search',
                   placeholder: extractText(app.translator.trans('core.forum.header.search_placeholder')),
                   value: this.value(),
                   oninput: m.withAttr('value', this.value),
diff --git a/js/forum/src/components/Search.js b/js/forum/src/components/Search.js
index c4bfddb21..9481f053c 100644
--- a/js/forum/src/components/Search.js
+++ b/js/forum/src/components/Search.js
@@ -83,6 +83,7 @@ export default class Search extends Component {
       })}>
         <div className="Search-input">
           <input className="FormControl"
+            type="search"
             placeholder={extractText(app.translator.trans('core.forum.header.search_placeholder'))}
             value={this.value()}
             oninput={m.withAttr('value', this.value)}
diff --git a/less/lib/Search.less b/less/lib/Search.less
index cfa2a770c..36ca2ac1b 100755
--- a/less/lib/Search.less
+++ b/less/lib/Search.less
@@ -60,6 +60,7 @@
     padding-left: 32px;
     padding-right: 32px;
     .transition(all 0.4s);
+    box-sizing: inherit !important;
   }
   .Button {
     float: left;