萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> 使用CSS去掉超鏈接的虛線邊框的方法

使用CSS去掉超鏈接的虛線邊框的方法

 在前端制作的過程中會發現,一些文字/圖片鏈接,或者一些input控件,在點擊時會在周圍出現虛線邊框,一般會在火狐和IE浏覽器下出現虛線框,谷歌下不會有。

  這些虛線邊框是作為對視覺設計的一種輔助,在不使用鼠標,而用鍵盤Tab鍵進行頁面浏覽時,會標示出當前所在的鏈接或控件的位置,便於浏覽。這對那些視覺有障礙的人士來說更是必不可少的。

  但是有些時候我們卻不想使用它們,因為浏覽器對虛線框的解析有差異,並且不規則,所以在視覺設計上反而成為了某種缺陷。所以這種時候,我們想要禁用這些虛線邊框,使浏覽者的視覺享受能夠完美無瑕。

  純CSS去掉超鏈接或按鈕點擊時出現的虛線邊框

CSS Code復制內容到剪貼板
  1. <style type="text/css">
  2. a,input,button{ outline:none; }
  3. ::-moz-focus-inner{border:0px;}
  4. </style>
  5. </head>
  6. <body>
  7. <a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
  8. <a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
  9. <input type="button" value="admin10000.com"/>
  10. <button>admin10000.com</button>
  11. </body>

  從以上代碼可以看出,可以通過設置CSS屬性outline解決。

  FF存在bug,其中input,button標簽通過私有屬性::-moz-focus-inner特別處理

  以上方法在IE6、IE7下無效。可使用 onfocus 屬性解決,如下:

CSS Code復制內容到剪貼板
  1.   <a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>

  使用jquery方法只需一句,非常簡單,支持所有浏覽器

JavaScript Code復制內容到剪貼板
  1.   $("a,input,button").focus(function(){this.blur()});  
copyright © 萬盛學電腦網 all rights reserved