解决点击search输入框的-webkit-search-cancel-button时下拉菜单不消失的问题

问题核心：点击搜索框内置的清空按钮时，输入框并未失去焦点，因此:focus-within选择器仍会触发，导致下拉菜单保持显示状态。

方案一：纯CSS实现（依赖:placeholder-shown伪类） #

通过结合焦点状态与输入框内容状态，调整下拉菜单的显示规则：

.form .formtextbox {
  position: relative;
  display: inline-block;
  width: 100%;
}

.form .formtextbox .options {
  display: none;
  position: absolute;
  background-color: var(--white);
  min-width: 100%;
  box-shadow: 0px 2px 7px 0px #0000001F;
  padding: 12px 16px;
  z-index: 1;
}

/* 仅当输入框获焦且有内容时，显示下拉菜单 */
.form .formtextbox:focus-within input:not(:placeholder-shown) ~ .options {
  display: block;
}

/* 可选：输入框有内容但失焦时，保持下拉显示（不需要则删除此条） */
.form .formtextbox input:not(:placeholder-shown) ~ .options {
  display: block;
}

注：:placeholder-shown伪类在输入框为空且显示占位文本时生效，主流浏览器均支持该特性。如果需要点击空输入框时也显示下拉，此方案不适用，建议选择方案二。

方案二：JavaScript动态控制（更灵活） #

通过监听输入框的输入、焦点事件，实时控制下拉菜单的显示状态：

修改后的HTML（添加ID方便选择） #

<form method="get" action="">
  <fieldset class="form">
    <div class="formtextbox">
      <input id="searchInput" title="search_form_title" type="search" placeholder="Search" autocomplete="off">
      <div id="searchOptions" class="options">
        <ul unselectable="on">
          <li>apple</li>
          <li>banana</li>
          <li>pineapple</li>
          <li>strawberry</li>
        </ul>
      </div>
    </div>
    <div class="formbutton">
      <input type="submit" hidden />
    </div>
  </fieldset>
</form>

新增JavaScript代码 #

const searchInput = document.getElementById('searchInput');
const searchOptions = document.getElementById('searchOptions');

// 监听输入内容变化，为空则隐藏下拉
searchInput.addEventListener('input', () => {
  searchOptions.style.display = searchInput.value.trim() ? 'block' : 'none';
});

// 点击输入框时，即使为空也显示下拉（保留原需求）
searchInput.addEventListener('focus', () => {
  if (searchInput.value.trim() === '') {
    searchOptions.style.display = 'block';
  }
});

// 输入框失焦时隐藏下拉
searchInput.addEventListener('blur', () => {
  searchOptions.style.display = 'none';
});

这种方式完全贴合需求：点击输入框（无论是否有内容）都显示下拉；清空输入内容后下拉自动隐藏；输入框失焦时下拉也会隐藏。

内容的提问来源于stack exchange，提问作者Bous