去掉超鏈接或按鈕點(diǎn)擊時出現(xiàn)的虛線邊框

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 18:51:56

去掉超鏈接或按鈕點(diǎn)擊時出現(xiàn)的虛線邊框

去掉超鏈接或按鈕點(diǎn)擊時出現(xiàn)的虛線邊框:在前端制作的過程中會發(fā)現(xiàn)，一些文字/圖片鏈接，或者一些input控件，在點(diǎn)擊時會在周圍出現(xiàn)虛線邊框，一般會在火狐和IE瀏覽器下出現(xiàn)虛線框，谷歌下不會有。這些虛線邊框是作為對視覺設(shè)計(jì)的一種輔助，在不使用鼠標(biāo)，而用鍵盤Tab鍵進(jìn)行頁面瀏覽時，會標(biāo)示出當(dāng)前

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀去掉超鏈接或按鈕點(diǎn)擊時出現(xiàn)的虛線邊框:在前端制作的過程中會發(fā)現(xiàn)，一些文字/圖片鏈接，或者一些input控件，在點(diǎn)擊時會在周圍出現(xiàn)虛線邊框，一般會在火狐和IE瀏覽器下出現(xiàn)虛線框，谷歌下不會有。這些虛線邊框是作為對視覺設(shè)計(jì)的一種輔助，在不使用鼠標(biāo)，而用鍵盤Tab鍵進(jìn)行頁面瀏覽時，會標(biāo)示出當(dāng)前

　　在前端制作的過程中會發(fā)現(xiàn)，一些文字/圖片鏈接，或者一些input控件，在點(diǎn)擊時會在周圍出現(xiàn)虛線邊框，一般會在火狐和IE瀏覽器下出現(xiàn)虛線框，谷歌下不會有。

　　這些虛線邊框是作為對視覺設(shè)計(jì)的一種輔助，在不使用鼠標(biāo)，而用鍵盤Tab鍵進(jìn)行頁面瀏覽時，會標(biāo)示出當(dāng)前所在的鏈接或控件的位置，便于瀏覽。這對那些視覺有障礙的人士來說更是必不可少的。

　　但是有些時候我們卻不想使用它們，因?yàn)闉g覽器對虛線框的解析有差異，并且不規(guī)則，所以在視覺設(shè)計(jì)上反而成為了某種缺陷。所以這種時候，我們想要禁用這些虛線邊框，使瀏覽者的視覺享受能夠完美無瑕。

　　純CSS去掉超鏈接或按鈕點(diǎn)擊時出現(xiàn)的虛線邊框

<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>

　　從以上代碼可以看出，可以通過設(shè)置CSS屬性outline解決。

　　FF存在bug，其中input，button標(biāo)簽通過私有屬性::-moz-focus-inner特別處理

　　以上方法在IE6、IE7下無效?？墒褂?onfocus 屬性解決，如下：

　　<a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>

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

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com