x
1
2
3
4
5
<label class="input input--actor flex items-center gap-half" style="max-inline-size: 20rem"> <span class="icon icon--search" aria-hidden="true"></span> <input type="search" name="search" id="search" placeholder="Search..." /> <span class="inline-flex gap-half"><kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd></span></label>1
2
3
4
5
<label class="input input--actor flex items-center gap-half" style="max-inline-size: 20rem"> <span class="icon icon--search" aria-hidden="true"></span> <%= search_field_tag "search", nil, placeholder: "Search..." %> <span class="inline-flex gap-half"><kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd></span></label>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.kbd { align-items: center; background-color: var(--kbd-background, var(--color-secondary)); border-radius: var(--kbd-radius, var(--rounded-md)); color: var(--kbd-color, var(--color-text-subtle)); display: inline-flex; font-family: inherit; font-size: var(--kbd-font-size, var(--text-xs)); font-weight: var(--font-medium); column-gap: var(--size-1); justify-content: center; padding-inline: var(--kbd-padding, var(--size-1)); pointer-events: none; user-select: none;}.kbd--tooltip { --kbd-background: rgb(from var(--color-text-reversed) r g b / .2); --kbd-color: var(--color-text-reversed);}
Java Script is not required or multiple files are needed, check the notes.
No notes provided.