首頁 > web前端 > css教學 > 去掉超連結或按鈕點擊時出現的虛線邊框

去掉超連結或按鈕點擊時出現的虛線邊框

巴扎黑
發布: 2017-04-05 16:54:01
原創
2061 人瀏覽過

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

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

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

  純CSS去掉超連結或按鈕點選時出現的虛線邊框

<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body> 
<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>
登入後複製

  從以上程式碼可以看出,可以透過設定CSS屬性outline來解決。

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

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

  admin10000.com

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

#   $("a,input,button").focus(function(){this.blur()});

以上是去掉超連結或按鈕點擊時出現的虛線邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板