iFrame Css Pseudo-classes

Question

我正在尝试为使用键盘导航的用户直观地识别我的iframe，例如互联

据我所知，只有：悬停有影响

iframe { border: 1px solid #fff; }    
iframe:hover { border: 1px solid #000; }

尝试使用时：焦点或：激活它们没有效果：

iframe:focus, iframe:active{ border: 1px solid #f00; }

我们如何让访问者知道他们已经标记为iframe元素？我不是要尝试设置iframe的内容，只是iframe本身。它为什么支持：悬停而不是其他人？

更新

tabindex不是一个选项

a）它不起作用：https://jsfiddle.net/qk034swn/ b）如果使用XHMTL

，页面将变为无效

Answer 1

只需在CSS中添加:focus或:active就足够了，因为iframe不是＆＃34;可聚焦＆＃34; 。

修改 - 现在，为解决方案

• tabindex属性可以使用。。经过一番探索后，我发现无法做到这一点。

这是一种简单的方法

HTML - <a href="#"><iframe src="http://foo.com"></iframe></a>

CSS - a:focus iframe{border:3px solid red;}

简而言之，我们将使用<a>标记使iframe成为焦点。 演示 - https://jsfiddle.net/ctqfacgw/1/

Answer 2

实际上是否可以显示？我认为你需要让tab键实际上集中在内容中而不是内容中。您需要在元素上设置href或使用全局HTML属性tab-index="0"（0因此它不会中断标签的正常流程）。