展開する検索ボックス

<form class="d04-02-10-search" role="search">
          <input type="search" placeholder="キーワードを入力" aria-label="サイト内検索">
          <button type="button" class="d04-02-10-btn" aria-label="検索ボックスを開く">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true">
              <circle cx="10.5" cy="10.5" r="6.5"/>
              <line x1="15.5" y1="15.5" x2="21" y2="21"/>
            </svg>
          </button>
        </form>

.d04-02-10-search{
          display:flex;align-items:center;
          background:#fff;border:2px solid #d5d9e0;border-radius:25px;
          padding:4px;transition:border-color .3s,box-shadow .3s;
        }
        .d04-02-10-search.is-open{
          border-color:#4a6cf7;box-shadow:0 4px 14px rgba(74,108,247,.2);
        }
        .d04-02-10-search input{
          width:0;padding:0;border:none;outline:none;background:transparent;
          font-size:14px;opacity:0;
          transition:width .4s cubic-bezier(.4,0,.2,1),padding .4s,opacity .3s;
        }
        .d04-02-10-search.is-open input{width:180px;padding:6px 6px 6px 14px;opacity:1}
        .d04-02-10-btn{
          width:38px;height:38px;border-radius:50%;flex:0 0 auto;
          border:none;background:#4a6cf7;color:#fff;cursor:pointer;
          display:flex;align-items:center;justify-content:center;
          transition:background .25s,transform .25s;
        }
        .d04-02-10-btn:hover{background:#3a58d6;transform:scale(1.06)}

(function(){
        var form=document.querySelector('.d04-02-10-search');
        if(!form)return;
        var btn=form.querySelector('.d04-02-10-btn');
        var input=form.querySelector('input');
        form.addEventListener('submit',function(e){e.preventDefault();});
        btn.addEventListener('click',function(){
          if(!form.classList.contains('is-open')){
            form.classList.add('is-open');
            btn.setAttribute('aria-label','検索する');
            setTimeout(function(){input.focus();},250);
          }else if(input.value.trim()===''){
            form.classList.remove('is-open');
            btn.setAttribute('aria-label','検索ボックスを開く');
          }
        });
      })();