diff --git a/core/themes/bartik/bartik.libraries.yml b/core/themes/bartik/bartik.libraries.yml
index 009a67f..6b1ff3e 100644
--- a/core/themes/bartik/bartik.libraries.yml
+++ b/core/themes/bartik/bartik.libraries.yml
@@ -26,7 +26,7 @@ global-styling:
       css/components/pager.css: {}
       css/components/panel.css: {}
       css/components/primary-menu.css: {}
-      css/components/search.css: {}
+      css/components/search-form.css: {}
       css/components/search-results.css: {}
       css/components/secondary-menu.css: {}
       css/components/shortcut.css: {}
diff --git a/core/themes/bartik/bartik.theme b/core/themes/bartik/bartik.theme
index 4f83a9e..c0f1caa 100644
--- a/core/themes/bartik/bartik.theme
+++ b/core/themes/bartik/bartik.theme
@@ -110,6 +110,15 @@ function bartik_preprocess_menu(&$variables) {
 }
 
 /**
+ * Implements hook_theme_suggestions_HOOK_alter() for form templates.
+ */
+function bartik_theme_suggestions_form_alter(array &$suggestions, array $variables) {
+  if ($variables['element']['#form_id'] == 'search_block_form') {
+    $suggestions[] = 'form__search_block_form';
+  }
+}
+
+/**
  * Helper function for handling the site name and slogan.
  */
 function _bartik_process_page(&$variables) {
diff --git a/core/themes/bartik/css/components/search-form.css b/core/themes/bartik/css/components/search-form.css
new file mode 100644
index 0000000..0896c17
--- /dev/null
+++ b/core/themes/bartik/css/components/search-form.css
@@ -0,0 +1,36 @@
+/**
+ * @file
+ * The visual styles for Bartik's search form(s).
+ */
+.search-form .form-search {
+  float: left; /* LTR */
+  font-size: 1em;
+  margin-right: 5px; /* LTR */
+  padding: 4px;
+}
+.search-form .form-search::-webkit-search-decoration {
+  display: none;
+}
+[dir="rtl"] .search-form .form-search {
+  float: right;
+  margin-left: 5px;
+  margin-right: 0;
+}
+.search-form .form-submit {
+  background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center;
+  cursor: pointer;
+  height: 31px;
+  margin-left: 0;
+  margin-right: 0;
+  overflow: hidden;
+  padding: 0;
+  text-indent: -9999px;
+  width: 34px;
+}
+.search-form .form-submit:hover,
+.search-form .form-submit:focus {
+  background: #dedede url(../../../../misc/icons/424242/loupe.svg) no-repeat center;
+}
+.search-form .form-item-keys label {
+  display: block;
+}
diff --git a/core/themes/bartik/css/components/search.css b/core/themes/bartik/css/components/search.css
deleted file mode 100644
index 146d189..0000000
--- a/core/themes/bartik/css/components/search.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* --------------- Search Form ---------------- */
-
-#block-search-form {
-  padding-bottom: 7px;
-}
-#block-search-form .content {
-  margin-top: 0;
-}
-#search-form input[type="search"],
-#block-search-form input[type="search"] {
-  box-sizing: border-box;
-  padding: 4px;
-  -webkit-appearance: textfield;
-}
-#search-form input[type="search"]::-webkit-search-decoration,
-#block-search-form input[type="search"]::-webkit-search-decoration {
-  display: none;
-}
-#search-form input#edit-keys,
-#block-search-form .form-item-search-block-form input {
-  float: left; /* LTR */
-  font-size: 1em;
-  margin-right: 5px; /* LTR */
-}
-[dir="rtl"] #search-form input#edit-keys,
-[dir="rtl"] #block-search-form .form-item-search-block-form input {
-  float: right;
-  margin-left: 5px;
-  margin-right: 0;
-}
-#search-block-form input.form-submit,
-#search-form input.form-submit {
-  margin-left: 0;
-  margin-right: 0;
-  height: 25px;
-  width: 34px;
-  padding: 0;
-  cursor: pointer;
-  text-indent: -9999px;
-  border-color: #e4e4e4 #d2d2d2 #b4b4b4;
-  background: #f0f0f0 url(../../../../misc/icons/505050/loupe.svg) no-repeat center;
-  overflow: hidden;
-}
-#search-block-form input.form-submit:hover,
-#search-block-form input.form-submit:focus,
-#search-form input.form-submit:hover,
-#search-form input.form-submit:focus {
-  background: #dedede url(../../../../misc/icons/424242/loupe.svg) no-repeat center;
-}
-#search-form .form-item-keys label {
-  display: block;
-}
diff --git a/core/themes/bartik/templates/form--search-block-form.html.twig b/core/themes/bartik/templates/form--search-block-form.html.twig
new file mode 100644
index 0000000..fa2753a
--- /dev/null
+++ b/core/themes/bartik/templates/form--search-block-form.html.twig
@@ -0,0 +1,17 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a 'form' element.
+ *
+ * Available variables
+ * - attributes: A list of HTML attributes for the wrapper element.
+ * - children: The child elements of the form.
+ *
+ * @see template_preprocess_form()
+ *
+ * @ingroup themeable
+ */
+#}
+<form{{ attributes.addClass('search-form','search-block-form') }}>
+  {{ children }}
+</form>