子元素不会在safari浏览器中占据父元素的焦点

Question

我有一个容器,当我点击它时会获得焦点并显示他内心的隐藏内容.

现在,在隐藏容器中,单击它时有一个按钮获得焦点并关闭父节点.

它适用于除ios和macos上的safari之外的所有浏览器.

我正在寻找一个干净的CSS解决方案.

HTML

<div class="box" tabindex="0">
  <div class="front">CLICK ME</div>
  <div class="hidden">
    <button class="close">close button</button>
  </div>
</div>

上海社会科学院

.box{
  position:relative;
  height:200px; width:200px;
}

.front,
.hidden{height:100%; width:100%; position:absolute; }

.close{height:100px; width:100px;}

.box:focus{
  .front{display:none;}
  .hidden{display:block;}
}

.front{background:blue; color:white;}
.hidden{background:red; display:none;}

DEMO

Answer 1

使用tabindex属性将按钮标记更改为其他元素(例如DIV),然后它也可以在Safari中使用.

Safari,显然iOS上的一些其他浏览器对按钮有奇怪的焦点行为.即使使用tabindex,它们似乎永远不会得到关注.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus

例

<button class="close">close button</button><!-- not working -->
<!-- Use instead -->
<div class="close" tabindex="0" role="button"></div><!-- working -->

DEMO