Expanding Search

DEMO

CODE

<div class="demo-stage es-stage"><div class="es-search"><input class="es-input" type="text" placeholder="Search..."><button class="es-btn" type="button" aria-label="search">🔍</button></div></div>

.es-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.es-search { display:flex; align-items:center; background:#1A1A1A; border:1px solid rgba(255,255,255,.12); border-radius:30px; padding:4px; }
.es-input { width:0; opacity:0; border:none; background:transparent; outline:none; color:#fff; font-family:'Inter',sans-serif; font-size:.9rem; padding:0; transition:width .4s ease, opacity .3s ease, padding .4s ease; }
.es-search.open .es-input { width:180px; opacity:1; padding:0 .8rem; }
.es-btn { flex:none; width:44px; height:44px; border:none; border-radius:50%; background:#E91B89; color:#fff; font-size:1.1rem; cursor:pointer; }

(function(){
  var box = document.querySelector('.es-search'), btn = document.querySelector('.es-btn'), input = document.querySelector('.es-input');
  if(!box || !btn) return;
  btn.addEventListener('click', function(){
    box.classList.toggle('open');
    if(box.classList.contains('open') && input) input.focus();
  });
})();

AI PROMPT

アイコンをクリックすると入力欄が横に伸びて現れる検索バーを作って。input は初期 width:0; opacity:0; padding:0、transition:width .4s, opacity .3s。コンテナの openクラスで width:180px; opacity:1; padding:0 .8rem に。ボタンのclickで openをトグルし、開いたら input.focus()。丸いアイコンボタンは flex:none で潰れないように。ヘッダーの省スペース検索に。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。