diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 4ffc25e2688e4..36f1f955f5f89 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -162,18 +162,18 @@ pre, .rustdoc.source .example-wrap {
 	color: #788797;
 }
 
-#titles > button.selected {
+#search-tabs > button.selected {
 	background-color: #141920 !important;
 	border-bottom: 1px solid #ffb44c !important;
 	border-top: none;
 }
 
-#titles > button:not(.selected) {
+#search-tabs > button:not(.selected) {
 	background-color: transparent !important;
 	border: none;
 }
 
-#titles > button:hover {
+#search-tabs > button:hover {
 	border-bottom: 1px solid rgba(242, 151, 24, 0.3);
 }
 
@@ -185,7 +185,7 @@ above the `@media (max-width: 700px)` rules due to a bug in the css checker */
 /* see https://github.com/rust-lang/rust/pull/71237#issuecomment-618170143 */
 pre.rust .lifetime {}
 pre.rust .kw {}
-#titles > button:hover, #titles > button.selected {}
+#search-tabs > button:hover, #search-tabs > button.selected {}
 pre.rust .self, pre.rust .bool-val, pre.rust .prelude-val, pre.rust .attribute {}
 pre.rust .kw-2, pre.rust .prelude-ty {}
 
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index a7922cdeba100..6dd15d2e1bbaa 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -88,12 +88,12 @@
 	--scrape-example-toggle-line-hover-background: #c5c5c5;
 }
 
-#titles > button:not(.selected) {
+#search-tabs > button:not(.selected) {
 	background-color: #252525;
 	border-top-color: #252525;
 }
 
-#titles > button:hover, #titles > button.selected {
+#search-tabs > button:hover, #search-tabs > button.selected {
 	border-top-color: #0089ff;
 	background-color: #353535;
 }
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index aff46f8dc6dff..804e20d0d44e9 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -85,12 +85,12 @@
 	--scrape-example-toggle-line-hover-background: #999;
 }
 
-#titles > button:not(.selected) {
+#search-tabs > button:not(.selected) {
 	background-color: #e6e6e6;
 	border-top-color: #e6e6e6;
 }
 
-#titles > button:hover, #titles > button.selected {
+#search-tabs > button:hover, #search-tabs > button.selected {
 	background-color: #ffffff;
 	border-top-color: #0089ff;
 }
diff --git a/src/test/rustdoc-gui/search-tab.goml b/src/test/rustdoc-gui/search-tab.goml
new file mode 100644
index 0000000000000..c2634a04c8a74
--- /dev/null
+++ b/src/test/rustdoc-gui/search-tab.goml
@@ -0,0 +1,76 @@
+// Checking the colors of the search tab headers.
+goto: "file://" + |DOC_PATH| + "/test_docs/fn.foo.html?search=something"
+show-text: true
+
+define-function: (
+    "check-colors",
+    (theme, background, background_selected, background_hover, border_bottom,
+     border_bottom_selected, border_bottom_hover, border_top, border_top_selected,
+     border_top_hover),
+    [
+        // Setting the theme.
+        ("local-storage", {"rustdoc-theme": |theme|, "rustdoc-use-system-theme": "false"}),
+        ("reload"),
+
+        // These two commands are used to be sure the search will be run.
+        ("focus", ".search-input"),
+        ("press-key", "Enter"),
+
+        ("wait-for", "#search-tabs"),
+        ("assert-css", ("#search-tabs > button:not(.selected)", {
+            "background-color": |background|,
+            "border-bottom": |border_bottom|,
+            "border-top": |border_top|,
+        })),
+        ("assert-css", ("#search-tabs > button.selected", {
+            "background-color": |background_selected|,
+            "border-bottom": |border_bottom_selected|,
+            "border-top": |border_top_selected|,
+        })),
+        ("move-cursor-to", "#search-tabs > button:not(.selected)"),
+        ("assert-css", ("#search-tabs > button:not(.selected):hover", {
+            "background-color": |background_hover|,
+            "border-bottom": |border_bottom_hover|,
+            "border-top": |border_top_hover|,
+        })),
+        // To prevent disrupting next run of this function.
+        ("move-cursor-to", ".search-input"),
+    ],
+)
+
+call-function: ("check-colors", {
+    "theme": "ayu",
+    "background": "rgba(0, 0, 0, 0)",
+    "background_selected": "rgb(20, 25, 32)",
+    "background_hover": "rgba(0, 0, 0, 0)",
+    "border_bottom": "0px none rgb(197, 197, 197)",
+    "border_bottom_selected": "1px solid rgb(255, 180, 76)",
+    "border_bottom_hover": "1px solid rgba(242, 151, 24, 0.3)",
+    "border_top": "0px none rgb(197, 197, 197)",
+    "border_top_selected": "0px none rgb(197, 197, 197)",
+    "border_top_hover": "0px none rgb(197, 197, 197)",
+})
+call-function: ("check-colors", {
+    "theme": "dark",
+    "background": "rgb(37, 37, 37)",
+    "background_selected": "rgb(53, 53, 53)",
+    "background_hover": "rgb(53, 53, 53)",
+    "border_bottom": "0px none rgb(221, 221, 221)",
+    "border_bottom_selected": "0px none rgb(221, 221, 221)",
+    "border_bottom_hover": "0px none rgb(221, 221, 221)",
+    "border_top": "2px solid rgb(37, 37, 37)",
+    "border_top_selected": "2px solid rgb(0, 137, 255)",
+    "border_top_hover": "2px solid rgb(0, 137, 255)",
+})
+call-function: ("check-colors", {
+    "theme": "light",
+    "background": "rgb(230, 230, 230)",
+    "background_selected": "rgb(255, 255, 255)",
+    "background_hover": "rgb(255, 255, 255)",
+    "border_bottom": "0px none rgb(0, 0, 0)",
+    "border_bottom_selected": "0px none rgb(0, 0, 0)",
+    "border_bottom_hover": "0px none rgb(0, 0, 0)",
+    "border_top": "2px solid rgb(230, 230, 230)",
+    "border_top_selected": "2px solid rgb(0, 137, 255)",
+    "border_top_hover": "2px solid rgb(0, 137, 255)",
+})