【5分で実装♪簡単コピペ】虫眼鏡アイコンで検索フォーム表示

HTML

 <form role="search" method="get" action="/search">
    <label class="search-form-label" for="search-a">
      <input id="search-a" class="search-form-input" type="search" name="q" autocomplete="off" placeholder="検索..." aria-label="サイト内検索">
      <svg class="search-form-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#86a3a0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </label>
  </form>

CSS

.search-form-label {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

.search-form-label .search-form-icon {
  position: absolute;
  top: 50%;
  left: 17px;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  transition: stroke 0.4s ease;
  pointer-events: none;
  fill: none;
}

.search-form-label .search-form-input {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 20px 0 20px 60px;
  border: none;
  border-radius: 30px;
  background-color: #eaf2f1;
  transition: width 0.4s ease, padding 0.4s ease, background-color 0.4s ease, color 0.3s ease, box-shadow 0.2s ease;
  outline: none;
  cursor: pointer;
  font-size: 16px;
  line-height: normal;
  overflow: hidden;
  color: transparent;
  caret-color: transparent;
}

.search-form-label .search-form-input::placeholder {
  color: transparent;
  transition: color 0.3s ease;
  opacity: 1;
}

.search-form-label .search-form-input:focus {
  width: min(90vw, 250px);
  padding: 20px 20px 20px 50px;
  cursor: text;
  background-color: #dbece9;
  color: #123a36;
  caret-color: #123a36;
}

.search-form-label .search-form-input:focus::placeholder {
  color: #86a3a0;
}

.search-form-label:focus-within .search-form-icon {
  stroke: #2d6a63;
}

.search-form-label .search-form-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

HTML

<div class="search-modal">
  <button class="search-modal-toggle" aria-label="検索を開く" aria-expanded="false">
    <svg class="search-modal-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <circle cx="11" cy="11" r="8"></circle>
      <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
    </svg>
  </button>
  <div class="search-modal-overlay">
    <div class="search-modal-content">
      <button class="search-modal-close" aria-label="検索を閉じる">×</button>
      <form role="search" method="get" action="/search">
        <input class="search-modal-input" type="search" name="q" autocomplete="off" placeholder="キーワード検索">
        <button type="submit" aria-label="検索する">検索</button>
      </form>
    </div>
  </div>
</div>

CSS

.search-modal-toggle {
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: #eaf2f1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-modal-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(18, 58, 54, 0.2);
}

.search-modal-icon {
  stroke: #86a3a0;
  fill: none;
}

.search-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-modal-content {
  position: relative;
  width: min(90%, 600px);
  padding: 60px 40px 40px;
  border-radius: 16px;
  background: #fff;
  transform: translateY(20px);
  transition: transform 0.3s ease;
}

.search-modal-overlay.is-open .search-modal-content {
  transform: translateY(0);
}

.search-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 32px;
  line-height: 1;
  color: #86a3a0;
}

.search-modal-content form {
  display: flex;
  gap: 10px;
}

.search-modal-content input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 50px;
  padding: 0 16px;
  border: 1px solid #86a3a0;
  border-radius: 8px;
  outline: none;
  font-size: 16px;
  color: #123a36;
  caret-color: #2d6a63;
  box-sizing: border-box;
}

.search-modal-content input:focus {
  border-color: #2d6a63;
}

.search-modal-input::placeholder {
  color: #86a3a0;
  opacity: 1;
}

.search-modal-content button[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  height: 50px;
  padding: 0 20px;
  border: none;
  border-radius: 8px;
  background: #2d6a63;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
}

.search-modal-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

JavaScript（Vanilla JS）

document.addEventListener("DOMContentLoaded", () => {
  const openBtn = document.querySelector(".search-modal-toggle");
  const closeBtn = document.querySelector(".search-modal-close");
  const modal = document.querySelector(".search-modal-overlay");
  const searchInput = document.querySelector(".search-modal-input");
  if (!(openBtn && closeBtn && modal && searchInput)) return;

  const openModal = () => {
    modal.classList.add("is-open");
    openBtn.setAttribute("aria-expanded", "true");
    searchInput.focus();
  };

  const closeModal = () => {
    modal.classList.remove("is-open");
    openBtn.setAttribute("aria-expanded", "false");
    openBtn.focus();
  };

  openBtn.addEventListener("click", openModal);
  closeBtn.addEventListener("click", closeModal);

  modal.addEventListener("click", ({ target }) => {
    if (target === modal) closeModal();
  });

  document.addEventListener("keydown", ({ key }) => {
    if (key === "Escape" && modal.classList.contains("is-open")) closeModal();
  });
});