網頁設計公司
您現在的位置:首頁  >  新聞中心
  • 軟體設計
    Software Development
  • 品牌及LOGO設計
    Brand and LOGO Design
  • 網站設計及建制
    Web Design
  • 多媒體動畫制作
    Multimedia Presentations
  • 聯絡我們
    Contact US
  • 新聞中心
    網頁設計公司必讀的文章 ( 259 ) 純CSS去除按鈕以及鏈接點擊時虛線

    深藏多年秘笈大公開,全世界唯一一家公佈,怎麼點就是點不出,純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網頁設計公司

    首頁 | 關於我們 | 新闻中心 | 聯絡我們 | 加入最愛
    Bay Stars Design 網頁設計公司 Copyright © 2005-2008 Bay Stars Design Web Design Company All risghts reserved.