iFrame Css僞類

我試圖用視覺識別用戶使用鍵盤導航的iframe iframe，按Tab鍵iFrame Css僞類

從我可以告訴，只有：懸停都有影響

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

當嘗試使用：焦點或：主動，他們沒有任何效果：

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

我們如何讓遊客知道他們已經標籤到iframe元素？我沒有試圖設計iframe的內容，只是iframe本身。它爲什麼支持：懸停而不是其他？

更新

tabindex屬性是不是一種選擇

一）它不工作：https://jsfiddle.net/qk034swn/ B）的頁面，如果使用XHMTL無效

2017-03-03 Scott

的是實際上是可選的？我認爲你需要讓tab鍵實際上集中在內容而不是內容上。您需要在元素上設置href或使用全局HTML屬性tab-index="0"（0，因此它不會中斷正常的Tab鍵流動）。

2017-03-03 12:22:54

是它的tabable，請參閱本演示中，通過標籤頁，tabIndex已沒有效果：https://jsfiddle.net/qk034swn/ – Scott

只需在CSS中添加:focus或:active將不夠，因爲iframe不是「可調焦」。

編輯 - 現在，對於解決

這裏有一個簡單的方法來做到這一點

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/

2017-03-03 12:31:42 Saharsh

Tab鍵索引沒有影響https://jsfiddle.net/ qk034swn/ – Scott

重新更新，這不是一個解決方案，你關注的是錨點，而不是iframe。如果您在激活紅色邊框時按下返回鍵，則會將您帶到錨點href - 而不是iframe內容。所以你最終在http // mywebsite /＃這會讓情況變得更糟！ – Scott

您是否想要將用戶轉到iframe中的內容？因爲如果是這種情況，那麼你的問題描述有點誤導，它說：「我們如何讓訪問者知道他們已經標籤到iframe元素？」。 – Saharsh

回答