diff --git a/aio/src/app/search/search-box/search-box.component.ts b/aio/src/app/search/search-box/search-box.component.ts
index a797e5fe75c..73794767c84 100644
--- a/aio/src/app/search/search-box/search-box.component.ts
+++ b/aio/src/app/search/search-box/search-box.component.ts
@@ -24,6 +24,7 @@ import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
(keyup)="doSearch()"
(focus)="doFocus()"
(click)="doSearch()">
+
/
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
index e0ec15754c3..8298e5f6e73 100644
--- a/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
+++ b/aio/src/styles/1-layouts/top-menu/_top-menu-theme.scss
@@ -88,6 +88,11 @@
color: constants.$mediumgray;
}
}
+
+ .search-box-shortcut {
+ border-color: constants.$mediumgray;
+ color: constants.$mediumgray;
+ }
}
aio-theme-toggle {
diff --git a/aio/src/styles/1-layouts/top-menu/_top-menu.scss b/aio/src/styles/1-layouts/top-menu/_top-menu.scss
index d16f61c9a89..9caeecd9378 100644
--- a/aio/src/styles/1-layouts/top-menu/_top-menu.scss
+++ b/aio/src/styles/1-layouts/top-menu/_top-menu.scss
@@ -208,6 +208,24 @@ mat-toolbar.app-toolbar {
}
}
+ .search-box-shortcut {
+ display: none;
+ position: absolute;
+ right: 16px;
+ font-size: 1.2rem;
+ line-height: 2.2rem;
+ padding: 0 0.8rem;
+ pointer-events: none;
+ font-weight: bold;
+ text-align: center;
+ border-radius: 4px;
+ border: 1px solid;
+ }
+
+ input:not(:focus):placeholder-shown + .search-box-shortcut {
+ display: block;
+ }
+
mat-icon {
position: absolute;
color: constants.$blue;