ショートカットキーで開く検索ボックス

<div class="d08-10-08-demo">
          <div class="d08-10-08-hint"><kbd>/</kbd> キーで検索を開く</div>
          <div class="d08-10-08-search" hidden>
            <svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true"><path fill="#8a8f9c" d="M10 2a8 8 0 1 0 4.9 14.3l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0 0 10 2zm0 2a6 6 0 1 1 0 12 6 6 0 0 1 0-12z"/></svg>
            <input class="d08-10-08-input" type="text" placeholder="検索キーワードを入力…">
          </div>
        </div>

.d08-10-08-demo{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:12px}
        .d08-10-08-hint{font-size:12px;color:#8a8f9c;background:#f3f4f8;padding:8px 14px;border-radius:99px}
        .d08-10-08-hint kbd{background:#fff;border:1px solid #d8dae2;border-radius:5px;padding:1px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:#3a3d4a;box-shadow:0 1px 0 #d8dae2}
        .d08-10-08-search{display:flex;align-items:center;gap:8px;width:0;max-width:260px;background:#fff;border:1.5px solid #6a5cff;border-radius:10px;padding:10px 14px;overflow:hidden;animation:d08-10-08-grow .25s ease forwards}
        @keyframes d08-10-08-grow{from{width:0;opacity:0}to{width:260px;opacity:1}}
        .d08-10-08-input{border:none;outline:none;font-size:13px;width:100%;background:transparent}

(function(){
        var root=document.querySelector('#item-08-10-08 .d08-10-08-demo');if(!root)return;
        var box=root.querySelector('.d08-10-08-search');
        var input=root.querySelector('.d08-10-08-input');
        var hint=root.querySelector('.d08-10-08-hint');
        function openSearch(){
          if(!box.hidden)return;
          box.hidden=false;
          hint.style.visibility='hidden';
          input.focus();
        }
        function closeSearch(){
          box.hidden=true;
          hint.style.visibility='visible';
        }
        root.tabIndex=0;
        root.addEventListener('keydown',function(e){
          if(e.key==='/'&&box.hidden){e.preventDefault();openSearch();}
          else if(e.key==='Escape'&&!box.hidden){closeSearch();}
        });
        hint.style.cursor='pointer';
        hint.addEventListener('click',openSearch);
      })();