Advertise keyboard shortcut for search in text box

Description

Add a / to right hand side of search text input element.

Screenshots / Mockups

I got the idea from Stripe docs who style this nicely IMO https://stripe.com/docs/stripe-cli/webhooks

[squidfunk]

@weitzman Jep, that’s the one. I’d favor a modal listing all keyboard shortcuts, because it would include all, and not only the search shortcut, but up to now, I haven’t found a good way of how to integrate this with user-level custom keyboard shortcuts which some people use, as those wouldn’t show up in the modal, as described in https://github.com/squidfunk/mkdocs-material/issues/798#issuecomment-599211072. Also, other users like @Stanzilla might favor another canonical key to be displayed as the keyboard shortcut, e.g. sof f, which both work.

Other than that, what you’re aiming for is trivial with some extra CSS, i.e. you could add an ::after pseudo on the input which contains the slash, for example like this:

[data-md-toggle="search"]:not(:checked) ~ .md-header .md-search__form::after {
  position: absolute;
  top: .3rem;
  right: .3rem;
  display: block;
  padding: .1rem .4rem;
  color: var(--md-default-bg-color);
  font-weight: bold;
  font-size: .8rem;
  border: .05rem solid var(--md-default-bg-color--lighter);
  border-radius: .1rem;
  content: "/";
}

This will only display the element when the search is not active. You can easily adjust the style to your taste. As this is trivial to add with some extra CSS, I’m closing it.

[weitzman]

And now it works on mine. Sorry for the noise.