如何让:focus-within在苹果iOS及Safari桌面端正常生效？

方案1：使用原生

/

控件 #

这是最简洁且符合可访问性的方案，原生控件自带展开/收起逻辑，无需额外JS或tabindex，Safari完美支持：

<details class="filter-dropdown">
  <summary class="filter-trigger">筛选选项</summary>
  <ul class="filter-options">
    <li><label><input type="checkbox" /> 选项1</label></li>
    <li><label><input type="checkbox" /> 选项2</label></li>
    <li><label><input type="checkbox" /> 选项3</label></li>
  </ul>
</details>

.filter-dropdown {
  position: relative;
  display: inline-block;
}

.filter-trigger {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  list-style: none; /* 去掉默认展开箭头 */
}

/* 自定义展开箭头 */
.filter-trigger::marker {
  content: '';
}
.filter-trigger::after {
  content: '▼';
  margin-left: 8px;
  font-size: 0.8em;
}

.filter-dropdown[open] .filter-trigger::after {
  content: '▲';
}

.filter-options {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 4px 0 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  list-style: none;
  display: none;
}

.filter-dropdown[open] .filter-options {
  display: block;
}

方案2：隐藏checkbox + label触发 #

通过label关联隐藏的checkbox，利用:checked状态控制下拉显示，同样纯CSS，兼容Safari：

<div class="filter-dropdown">
  <input type="checkbox" id="filter-toggle" class="filter-toggle" hidden>
  <label for="filter-toggle" class="filter-trigger">筛选选项</label>
  <ul class="filter-options">
    <li><label><input type="checkbox" /> 选项1</label></li>
    <li><label><input type="checkbox" /> 选项2</label></li>
    <li><label><input type="checkbox" /> 选项3</label></li>
  </ul>
</div>

.filter-dropdown {
  position: relative;
  display: inline-block;
}

.filter-trigger {
  padding: 8px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
}

.filter-trigger::after {
  content: '▼';
  margin-left: 8px;
  font-size: 0.8em;
}

.filter-toggle:checked + .filter-trigger::after {
  content: '▲';
}

.filter-options {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 4px 0 0;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  list-style: none;
  display: none;
}

.filter-toggle:checked ~ .filter-options {
  display: block;
}

原方案失效原因 #

Safari对按钮点击时的焦点传递逻辑与其他浏览器不同：点击时，按钮本身会获得焦点，但父元素的:focus-within不会被触发（其他浏览器中会）。添加tabindex="0"会让父元素成为可聚焦元素，从而触发:focus-within，但会破坏Tab导航的自然顺序。

上面两种方案都绕开了:focus-within的依赖，完全用原生状态或CSS选择器实现，同时保持良好的可访问性和浏览器兼容性。

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