深藏多年秘笈大公開,全世界唯一一家公佈,怎麼點就是點不出,純CSS去掉按鈕或者鏈接點擊產生的虛線。

HTML代碼
<style type="text/css"> .wrap{position:relative;} .btns{zoom:1;} .btns *{outline:0;zoom:1;background:#f2f2f2;} .btns button::-moz-focus-inner{border-color:transparent!important;} </style> <div class="wrap"> <div class="btns"> <button type="button">確定</button><button type="button">取消</button> <a href="#">確定</a><a href="#">取消</a> </div> </div>
[Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]
這個東東是無意中的發現,用處數數也瞞多,像ie下帶border的button點擊時噁心的表現、去掉tab的點擊虛線等等。但遺憾的是這個東東在實踐中發現,ie下還是容易受樣式環境影響。
這個效果的實現重點在於我在無意中發現了IE下的一個bug,這個bug在特定環境會導致按鈕或鏈接點擊時失去虛線。其它瀏覽器就比較簡單,支持CSS2的瀏覽器可以通過設置outline解決,FF的button標籤通過私有屬性特別處理,DEMO在多個主流瀏覽器測試通過。
文章提供 BAYSTARS DESIGN網頁設計公司