如何觸發crossbrowser FOCUS一個整潔的輪廓元素？

Question

見琴：http://jsfiddle.net/stefek99/9m5NZ/1/ 獲取來源：http://pastie.org/3654715

鉻17：只是工作。

IE 9：您需要在兩次點擊「點擊」

火狐11：你需要給一些重點的其他元素上，然後「咔嚓」的作品。

這是爲什麼？ （都試過了，沒有任何線索）

Answer 1

從onclick處理所有return false;首先，否則瀏覽器可能會跟隨鏈接，並決定遷往別處焦點。

小心「CSS重置」或類似的刪除焦點輪廓。添加你自己的風格：

:focus {outline: 2px solid blue;} 

有了這兩個修改它爲我工作。

至於輪廓的「整潔」，這取決於瀏覽器。 WebKit爲此特別提供了-webkit-focus-ring-color。壁虎支持-moz-outline-radius。對於跨瀏覽器風格，您需要推出自己的（嘗試border-image）。