diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 710ca3ee7c7e7..8d0bcb7519b61 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -693,8 +693,13 @@ h2.location a {
 	flex-grow: 1;
 	margin: 0px;
 	padding: 0px;
+	/* We use overflow-wrap: break-word for Safari, which doesn't recognize
+	   `anywhere`: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap */
 	overflow-wrap: break-word;
+	/* Then override it with `anywhere`, which is required to make non-Safari browsers break
+	   more aggressively when we want them to. */
 	overflow-wrap: anywhere;
+	background-color: var(--main-background-color);
 }
 
 .in-band > code, .in-band > .code-header {
@@ -731,13 +736,13 @@ pre, .rustdoc.source .example-wrap {
 
 .docblock table td {
 	padding: .5em;
-	border: 1px dashed;
+	border: 1px dashed var(--border-color);
 }
 
 .docblock table th {
 	padding: .5em;
 	text-align: left;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 }
 
 .fields + table {
@@ -835,20 +840,6 @@ nav.sub {
 .source nav.sub {
 	margin-left: 32px;
 }
-nav.main {
-	padding: 20px 0;
-	text-align: center;
-}
-nav.main .current {
-	border-top: 1px solid;
-	border-bottom: 1px solid;
-}
-nav.main .separator {
-	border: 1px solid;
-	display: inline-block;
-	height: 23px;
-	margin: 0 20px;
-}
 nav.sum { text-align: right; }
 nav.sub form { display: inline; }
 
@@ -974,7 +965,7 @@ table,
 	max-width: 100%;
 	/* contents can overflow because of max-width limit, then show ellipsis */
 	text-overflow: ellipsis;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 4px;
 	outline: none;
 	cursor: pointer;
@@ -1027,11 +1018,12 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	-moz-box-sizing: border-box !important;
 	box-sizing: border-box !important;
 	outline: none;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 2px;
 	padding: 8px;
 	font-size: 1rem;
 	width: 100%;
+	background-color: var(--button-background-color);
 }
 
 .search-results {
@@ -1087,7 +1079,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	display: block;
 	margin-top: 7px;
 	border-radius: 3px;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	font-size: 1rem;
 }
 
@@ -1096,7 +1088,7 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	content: '';
 	position: absolute;
 	right: 11px;
-	border: solid;
+	border: solid var(--border-color);
 	border-width: 1px 1px 0 0;
 	display: inline-block;
 	padding: 4px;
@@ -1132,13 +1124,13 @@ so that we can apply CSS-filters to change the arrow color in themes */
 	text-align: center;
 	display: block;
 	margin: 10px 0;
-	border-bottom: 1px solid;
+	border-bottom: 1px solid var(--border-color);
 	padding-bottom: 4px;
 	margin-bottom: 6px;
 }
 #help-button span.bottom {
 	clear: both;
-	border-top: 1px solid;
+	border-top: 1px solid var(--border-color);
 }
 .side-by-side {
 	text-align: initial;
@@ -1331,6 +1323,7 @@ h3.variant {
 	border-radius: 6px;
 	margin-left: 5px;
 	font-size: 1rem;
+	border: 1px solid var(--border-color);
 }
 
 .tooltip.ignore::after {
@@ -1496,7 +1489,7 @@ pre.rust {
 #source-sidebar > .title {
 	font-size: 1.5rem;
 	text-align: center;
-	border-bottom: 1px solid;
+	border-bottom: 1px solid var(--border-color);
 	margin-bottom: 6px;
 }
 #sidebar-toggle > button {
@@ -1524,11 +1517,12 @@ pre.rust {
 
 #copy-path {
 	height: 34px;
+	background-color: var(--main-background-color);
 }
 #settings-menu > a, #help-button > button, #copy-path {
 	padding: 5px;
 	width: 33px;
-	border: 1px solid;
+	border: 1px solid var(--border-color);
 	border-radius: 2px;
 	cursor: pointer;
 }
@@ -1539,6 +1533,7 @@ pre.rust {
 	padding: 5px;
 	height: 100%;
 	display: block;
+	background-color: var(--button-background-color);
 }
 
 @keyframes rotating {
@@ -1588,37 +1583,13 @@ input:checked + .slider {
 	border: 0;
 }
 
-#theme-choices {
-	display: none;
-	position: absolute;
-	left: 0;
-	top: 28px;
-	border: 1px solid;
-	border-radius: 3px;
-	z-index: 1;
-	cursor: pointer;
-}
-
-#theme-choices > button {
-	border: none;
-	width: 100%;
-	padding: 4px 8px;
-	text-align: center;
-	background: rgba(0,0,0,0);
-	overflow-wrap: normal;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top: 1px solid;
-}
-
 kbd {
 	display: inline-block;
 	padding: 3px 5px;
 	font: 15px monospace;
 	line-height: 10px;
 	vertical-align: middle;
-	border: solid 1px;
+	border: solid 1px var(--border-color);
 	border-radius: 3px;
 	cursor: default;
 }
diff --git a/src/librustdoc/html/static/css/themes/ayu.css b/src/librustdoc/html/static/css/themes/ayu.css
index 4dfb64abbebe8..e7ccd402dd024 100644
--- a/src/librustdoc/html/static/css/themes/ayu.css
+++ b/src/librustdoc/html/static/css/themes/ayu.css
@@ -14,6 +14,8 @@ Original by Dempfi (https://github.com/dempfi/ayu)
 	--scrollbar-thumb-background-color: #5c6773;
 	--scrollbar-color: #5c6773 #24292f;
 	--headings-border-bottom-color: #5c6773;
+	--border-color: #5c6773;
+	--button-background-color: #141920;
 }
 
 .slider {
@@ -36,10 +38,6 @@ h4 {
 	border: none;
 }
 
-.in-band {
-	background-color: #0f1419;
-}
-
 .docblock code {
 	color: #ffb454;
 }
@@ -84,10 +82,6 @@ pre, .rustdoc.source .example-wrap {
 	border-right: 1px solid #ffb44c;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #5c6773;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -151,13 +145,6 @@ pre, .rustdoc.source .example-wrap {
 pre.rust .comment { color: #788797; }
 pre.rust .doccomment { color: #a1ac88; }
 
-nav.main .current {
-	border-top-color: #5c6773;
-	border-bottom-color: #5c6773;
-}
-nav.main .separator {
-	border: 1px solid #5c6773;
-}
 a {
 	color: #39AFD7;
 }
@@ -182,17 +169,6 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(100%);
 }
 
-.search-input {
-	background-color: #141920;
-	border-color: #424c57;
-}
-
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #5c6773 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(41%) sepia(12%) saturate(487%) hue-rotate(171deg) brightness(94%) contrast(94%);
@@ -205,7 +181,7 @@ details.rustdoc-toggle > summary::before {
 }
 
 .search-input {
-	color: #ffffff;
+	color: #fff;
 }
 
 .module-item .stab,
@@ -333,7 +309,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 .tooltip::after {
 	background-color: #314559;
 	color: #c5c5c5;
-	border: 1px solid #5c6773;
 }
 
 .tooltip::before {
@@ -342,11 +317,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #314559;
-	border-color: #5c6773;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #5c6773;
 }
 
 #titles > button.selected {
@@ -449,23 +419,13 @@ a.result-keyword:focus {}
 .sidebar a.current.tymethod {}
 .sidebar a.current.keyword {}
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #5c6773;
-	}
-}
-
 kbd {
 	color: #c5c5c5;
 	background-color: #314559;
-	border-color: #5c6773;
-	border-bottom-color: #5c6773;
 	box-shadow: inset 0 -1px 0 #5c6773;
 }
 
 #settings-menu > a, #help-button > button {
-	border-color: #5c6773;
-	background-color: #0f1419;
 	color: #fff;
 }
 
@@ -473,11 +433,6 @@ kbd {
 	filter: invert(100);
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #5c6773;
-}
-
 #copy-path {
 	color: #fff;
 }
@@ -493,19 +448,6 @@ kbd {
 	border-color: #e0e0e0;
 }
 
-#theme-choices {
-	border-color: #5c6773;
-	background-color: #0f1419;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #5c6773;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: rgba(110, 110, 110, 0.33);
-}
-
 .search-results .result-name span.alias {
 	color: #c5c5c5;
 }
@@ -515,7 +457,6 @@ kbd {
 
 #source-sidebar > .title {
 	color: #fff;
-	border-bottom-color: #5c6773;
 }
 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
diff --git a/src/librustdoc/html/static/css/themes/dark.css b/src/librustdoc/html/static/css/themes/dark.css
index 39f83c9980827..1fcda22b6f4fa 100644
--- a/src/librustdoc/html/static/css/themes/dark.css
+++ b/src/librustdoc/html/static/css/themes/dark.css
@@ -9,6 +9,8 @@
 	--scrollbar-thumb-background-color: rgba(32, 34, 37, .6);
 	--scrollbar-color: rgba(32,34,37,.6) #5a5a5a;
 	--headings-border-bottom-color: #d2d2d2;
+	--border-color: #e0e0e0;
+	--button-background-color: #f0f0f0;
 }
 
 .slider {
@@ -21,10 +23,6 @@ input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-.in-band {
-	background-color: #353535;
-}
-
 .rust-logo {
 	filter: drop-shadow(1px 0 0px #fff)
 		drop-shadow(0 1px 0 #fff)
@@ -42,10 +40,6 @@ input:focus + .slider {
 	background-color: #0a042f !important;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #ddd;
-}
-
 .search-results a:hover {
 	background-color: #777;
 }
@@ -127,14 +121,6 @@ a.result-keyword:focus { background-color: #884719; }
 pre.rust .comment { color: #8d8d8b; }
 pre.rust .doccomment { color: #8ca375; }
 
-nav.main .current {
-	border-top-color: #eee;
-	border-bottom-color: #eee;
-}
-nav.main .separator {
-	border-color: #eee;
-}
-
 a {
 	color: #D2991D;
 }
@@ -154,16 +140,9 @@ details.rustdoc-toggle > summary::before {
 
 .search-input {
 	color: #111;
-	background-color: #f0f0f0;
 	border-color: #f0f0f0;
 }
 
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #d2d2d2 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(94%) sepia(0%) saturate(721%) hue-rotate(255deg) brightness(90%) contrast(90%);
@@ -175,10 +154,6 @@ details.rustdoc-toggle > summary::before {
 	filter: invert(69%) sepia(60%) saturate(6613%) hue-rotate(184deg) brightness(100%) contrast(91%);
 }
 
-.search-input {
-	border-color: #e0e0e0;
-}
-
 .search-input:focus {
 	border-color: #008dfd;
 }
@@ -296,11 +271,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #111;
-	border-color: #777;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #d2d2d2;
 }
 
 #titles > button:not(.selected) {
@@ -317,23 +287,13 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	color: #888;
 }
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #000;
-	}
-}
-
 kbd {
 	color: #000;
 	background-color: #fafbfc;
-	border-color: #d1d5da;
-	border-bottom-color: #c6cbd1;
 	box-shadow: inset 0 -1px 0 #c6cbd1;
 }
 
 #settings-menu > a, #help-button > button {
-	border-color: #e0e0e0;
-	background: #f0f0f0;
 	color: #000;
 }
 
@@ -342,11 +302,6 @@ kbd {
 	border-color: #ffb900;
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #d2d2d2;
-}
-
 #copy-path {
 	color: #999;
 }
@@ -357,19 +312,6 @@ kbd {
 	filter: invert(65%);
 }
 
-#theme-choices {
-	border-color: #e0e0e0;
-	background-color: #353535;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #e0e0e0;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: #4e4e4e;
-}
-
 .search-results .result-name span.alias {
 	color: #fff;
 }
@@ -377,9 +319,6 @@ kbd {
 	color: #ccc;
 }
 
-#source-sidebar > .title {
-	border-bottom-color: #ccc;
-}
 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
 	background-color: #444;
diff --git a/src/librustdoc/html/static/css/themes/light.css b/src/librustdoc/html/static/css/themes/light.css
index 5698088c790bb..7139c199729ae 100644
--- a/src/librustdoc/html/static/css/themes/light.css
+++ b/src/librustdoc/html/static/css/themes/light.css
@@ -9,6 +9,8 @@
 	--scrollbar-thumb-background-color: rgba(36, 37, 39, 0.6);
 	--scrollbar-color: rgba(36, 37, 39, 0.6) #d9d9d9;
 	--headings-border-bottom-color: #ddd;
+	--border-color: #e0e0e0;
+	--button-background-color: #fff;
 }
 
 .slider {
@@ -21,10 +23,6 @@ input:focus + .slider {
 	box-shadow: 0 0 0 2px #0a84ff, 0 0 0 6px rgba(10, 132, 255, 0.3);
 }
 
-.in-band {
-	background-color: white;
-}
-
 .rust-logo {
 	/* This rule exists to force other themes to explicitly style the logo.
 	 * Rustdoc has a custom linter for this purpose.
@@ -41,10 +39,6 @@ input:focus + .slider {
 	background-color: #FDFFD3 !important;
 }
 
-.docblock table td, .docblock table th {
-	border-color: #ddd;
-}
-
 .search-results a:hover {
 	background-color: #ddd;
 }
@@ -123,14 +117,6 @@ a.result-keyword:focus { background-color: #afc6e4; }
 .sidebar a.current.tymethod { color: #a67736; }
 .sidebar a.current.keyword { color: #356da4; }
 
-nav.main .current {
-	border-top-color: #000;
-	border-bottom-color: #000;
-}
-nav.main .separator {
-	border: 1px solid #000;
-}
-
 a {
 	color: #3873AD;
 }
@@ -144,16 +130,6 @@ details.rustdoc-toggle > summary::before {
 	color: #999;
 }
 
-.search-input {
-	background-color: white;
-	border-color: #e0e0e0;
-}
-#crate-search {
-	/* Without the `!important`, the border-color is ignored for `<select>`...
-	   It cannot be in the group above because `.search-input` has a different border color on
-	   hover. */
-	border-color: #e0e0e0 !important;
-}
 #crate-search-div::after {
 	/* match border-color; uses https://codepen.io/sosuke/pen/Pjoqqp */
 	filter: invert(100%) sepia(0%) saturate(4223%) hue-rotate(289deg) brightness(114%) contrast(76%);
@@ -279,11 +255,6 @@ pre.ignore:hover, .information:hover + pre.ignore {
 
 .notable-traits-tooltiptext {
 	background-color: #eee;
-	border-color: #999;
-}
-
-.notable-traits-tooltiptext .notable {
-	border-bottom-color: #DDDDDD;
 }
 
 #titles > button:not(.selected) {
@@ -300,35 +271,17 @@ pre.ignore:hover, .information:hover + pre.ignore {
 	color: #888;
 }
 
-@media (max-width: 700px) {
-	.sidebar-elems {
-		border-right-color: #000;
-	}
-}
-
 kbd {
 	color: #000;
 	background-color: #fafbfc;
-	border-color: #d1d5da;
-	border-bottom-color: #c6cbd1;
 	box-shadow: inset 0 -1px 0 #c6cbd1;
 }
 
-#settings-menu > a, #help-button > button {
-	border-color: #e0e0e0;
-	background-color: #fff;
-}
-
 #settings-menu > a:hover, #settings-menu > a:focus,
 #help-button > button:hover, #help-button > button:focus {
 	border-color: #717171;
 }
 
-.popover, .popover::before,
-#help-button span.top, #help-button span.bottom {
-	border-color: #e0e0e0;
-}
-
 #copy-path {
 	color: #999;
 }
@@ -339,19 +292,6 @@ kbd {
 	filter: invert(35%);
 }
 
-#theme-choices {
-	border-color: #ccc;
-	background-color: #fff;
-}
-
-#theme-choices > button:not(:first-child) {
-	border-top-color: #e0e0e0;
-}
-
-#theme-choices > button:hover, #theme-choices > button:focus {
-	background-color: #eee;
-}
-
 .search-results .result-name span.alias {
 	color: #000;
 }
@@ -359,9 +299,6 @@ kbd {
 	color: #999;
 }
 
-#source-sidebar > .title {
-	border-bottom-color: #ccc;
-}
 #source-sidebar div.files > a:hover, details.dir-entry summary:hover,
 #source-sidebar div.files > a:focus, details.dir-entry summary:focus {
 	background-color: #E0E0E0;
diff --git a/src/test/rustdoc-gui/pocket-menu.goml b/src/test/rustdoc-gui/pocket-menu.goml
index 782526e29f45e..71d514648ba26 100644
--- a/src/test/rustdoc-gui/pocket-menu.goml
+++ b/src/test/rustdoc-gui/pocket-menu.goml
@@ -56,7 +56,7 @@ reload:
 click: "#help-button"
 assert-css: (
     "#help-button .popover",
-    {"display": "block", "border-color": "rgb(210, 210, 210)"},
+    {"display": "block", "border-color": "rgb(224, 224, 224)"},
 )
 compare-elements-css: ("#help-button .popover", "#help-button .top", ["border-color"])
 compare-elements-css: ("#help-button .popover", "#help-button .bottom", ["border-color"])
diff --git a/src/test/rustdoc-gui/search-filter.goml b/src/test/rustdoc-gui/search-filter.goml
index b12eddfd12ad9..35d7ca480cae1 100644
--- a/src/test/rustdoc-gui/search-filter.goml
+++ b/src/test/rustdoc-gui/search-filter.goml
@@ -69,7 +69,7 @@ click: "#settings-menu"
 wait-for: "#settings"
 click: "#theme-dark"
 wait-for-css: ("#crate-search", {
-    "border": "1px solid rgb(210, 210, 210)",
+    "border": "1px solid rgb(224, 224, 224)",
     "color": "rgb(221, 221, 221)",
     "background-color": "rgb(53, 53, 53)",
 })
diff --git a/src/test/rustdoc-gui/search-form-elements.goml b/src/test/rustdoc-gui/search-form-elements.goml
new file mode 100644
index 0000000000000..c35a86ccd1cab
--- /dev/null
+++ b/src/test/rustdoc-gui/search-form-elements.goml
@@ -0,0 +1,243 @@
+// This test ensures that the elements in ".search-form" have the expected display.
+goto: file://|DOC_PATH|/test_docs/index.html
+show-text: true
+
+// Ayu theme
+local-storage: {
+    "rustdoc-theme": "ayu",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+        "color": "rgb(255, 255, 255)",
+    },
+)
+focus: ".search-input"
+// Nothing should change.
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+        "color": "rgb(255, 255, 255)",
+    },
+)
+
+assert-css: (
+    "#help-button",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+assert-css: (
+    "#help-button > button",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+move-cursor-to: "#help-button"
+assert-css: (
+    "#help-button:hover",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#help-button:hover > button",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+
+assert-css: (
+    "#settings-menu",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+assert-css: (
+    "#settings-menu > a",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(92, 103, 115)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+move-cursor-to: "#settings-menu"
+assert-css: (
+    "#settings-menu:hover",
+    {"border-color": "rgb(197, 197, 197)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#settings-menu:hover > a",
+    {
+        "color": "rgb(255, 255, 255)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(20, 25, 32)",
+    },
+)
+
+// Dark theme
+local-storage: {
+    "rustdoc-theme": "dark",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(240, 240, 240)",
+        "background-color": "rgb(240, 240, 240)",
+        "color": "rgb(17, 17, 17)",
+    },
+)
+focus: ".search-input"
+// Only "border-color" should change.
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(0, 141, 253)",
+        "background-color": "rgb(240, 240, 240)",
+        "color": "rgb(17, 17, 17)",
+    },
+)
+
+assert-css: (
+    "#help-button",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+assert-css: (
+    "#help-button > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+move-cursor-to: "#help-button"
+assert-css: (
+    "#help-button:hover",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#help-button:hover > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(255, 185, 0)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+
+assert-css: (
+    "#settings-menu",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+assert-css: (
+    "#settings-menu > a",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+move-cursor-to: "#settings-menu"
+assert-css: (
+    "#settings-menu:hover",
+    {"border-color": "rgb(221, 221, 221)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#settings-menu:hover > a",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(255, 185, 0)",
+        "background-color": "rgb(240, 240, 240)",
+    },
+)
+
+// Light theme
+local-storage: {
+    "rustdoc-theme": "light",
+    "rustdoc-use-system-theme": "false",
+}
+reload:
+
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(255, 255, 255)",
+        "color": "rgb(0, 0, 0)",
+    },
+)
+focus: ".search-input"
+// Nothing should change.
+assert-css: (
+    ".search-input",
+    {
+        "border-color": "rgb(102, 175, 233)",
+        "background-color": "rgb(255, 255, 255)",
+        "color": "rgb(0, 0, 0)",
+    },
+)
+
+assert-css: (
+    "#help-button",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+assert-css: (
+    "#help-button > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
+move-cursor-to: "#help-button"
+assert-css: (
+    "#help-button:hover",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#help-button:hover > button",
+    {
+        "color": "rgb(0, 0, 0)",
+        "border-color": "rgb(113, 113, 113)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
+
+assert-css: (
+    "#settings-menu",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+assert-css: (
+    "#settings-menu > a",
+    {
+        "color": "rgb(56, 115, 173)",
+        "border-color": "rgb(224, 224, 224)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
+move-cursor-to: "#settings-menu"
+assert-css: (
+    "#settings-menu:hover",
+    {"border-color": "rgb(0, 0, 0)"},
+)
+// Only "border-color" should change.
+assert-css: (
+    "#settings-menu:hover > a",
+    {
+        "color": "rgb(56, 115, 173)",
+        "border-color": "rgb(113, 113, 113)",
+        "background-color": "rgb(255, 255, 255)",
+    },
+)
diff --git a/src/test/rustdoc-gui/search-input.goml b/src/test/rustdoc-gui/search-input.goml
index 44123b702df8a..6903e1a1bf5c6 100644
--- a/src/test/rustdoc-gui/search-input.goml
+++ b/src/test/rustdoc-gui/search-input.goml
@@ -3,9 +3,8 @@ goto: file://|DOC_PATH|/test_docs/index.html
 local-storage: {"rustdoc-use-system-theme": "false", "rustdoc-theme": "dark"}
 reload:
 
-assert-css: (".search-input", {"border-color": "rgb(224, 224, 224)"})
+assert-css: (".search-input", {"border-color": "rgb(240, 240, 240)"})
 click: ".search-input"
-focus: ".search-input"
 assert-css: (".search-input", {"border-color": "rgb(0, 141, 253)"})
 
 local-storage: {"rustdoc-theme": "light"}
@@ -18,6 +17,6 @@ assert-css: (".search-input", {"border-color": "rgb(102, 175, 233)"})
 local-storage: {"rustdoc-theme": "ayu"}
 reload:
 
-assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"})
+assert-css: (".search-input", {"border-color": "rgb(92, 103, 115)"})
 click: ".search-input"
-assert-css: (".search-input", {"border-color": "rgb(66, 76, 87)"})
+assert-css: (".search-input", {"border-color": "rgb(92, 103, 115)"})