在前端制作的過程中會發(fā)現(xiàn)，一些文字/圖片鏈接，或者一些input控件，在點(diǎn)擊時會在周圍出現(xiàn)虛線邊框。

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

10年積累的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計(jì)制作后付款的網(wǎng)站建設(shè)流程，更有平定免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

那么，如何去除這些點(diǎn)擊時才會出現(xiàn)的虛線邊框呢？

卻倒也是蠻復(fù)雜的，且逐一分析一番。

1. outline:none;
通常我們會這么寫：

1 a:focus, input[type=button] ,input[type=submit] {
2     outline:none;
3 }

優(yōu)點(diǎn)是代碼簡潔，使用一行css就能解決問題，但是也有缺點(diǎn)：ie6、ie7并不認(rèn)識outline屬性。

2. hidefocus=”true”;
hidefocus是ie系列的專有屬性，能夠作用于所有ie序列的瀏覽器。
也可以寫作：hidefocus=”hidefocus”;
另外，hidefocus并不是W3C推薦的標(biāo)準(zhǔn)屬性。
缺點(diǎn)是非全局控制，需要在每個需要去虛線邊框的鏈接或input上加代碼。

3. onfocus=”this.blur()”;
優(yōu)點(diǎn)是比較通用。
缺點(diǎn)也很多，首先同2一樣，也是屬于局部控制的手段，需要在每一個需要去虛線邊框的標(biāo)簽上使用；
然后這是屬于script范疇，對于禁用JavaScript的用戶來說不起作用；
將script直接寫在html中對于頁面效率有負(fù)面作用。
該方法需要與border:none;配合使用。

4. :active{outline:none;}
與1大致相同，唯一的區(qū)別是會在Tab鍵切換時出現(xiàn)虛線邊框。

5. ::-moz-focus-inner{outline:none;}
Firefox的專有屬性，在去除input的虛線邊框時需要使用到此屬性。
但是經(jīng)測試，應(yīng)該對select無作用。

6. 使用JS遍歷每一個鏈接

1 window.onload=function()
2 {
3 for(var ii=0; i

也可以封裝起來作為函數(shù)：

1 function fHideFocus(tName){
2     aTag=document.getElementsByTagName(tName);
3   for(i=0;i

當(dāng)前是添加一個hidefocus的屬性，注釋掉的句子是添加onfucus=this.blur();
然后調(diào)用fHideFocus(“A”)，即可把a(bǔ)的虛線框去掉。
通過傳遞不同的參數(shù)，可以去掉更多的虛線框，比如”BUTTON”可以去掉button按鈕的虛線邊框。
參數(shù)要用大寫字母。

轉(zhuǎn)載：http://www.decimage.com/web/remove-dotted-border-when-click-on-link-or-input.html#


本文標(biāo)題：去除input，a，按鍵鏈接時出現(xiàn)的虛線方法-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://weahome.cn/article/dgsddo.html