在前端制作的過(guò)程中會(huì)發(fā)現(xiàn)，一些文字/圖片鏈接，或者一些input控件，在點(diǎn)擊時(shí)會(huì)在周?chē)霈F(xiàn)虛線邊框。

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

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

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

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

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

1. outline:none;
通常我們會(huì)這么寫(xiě)：

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

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

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

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

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

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

6. 使用JS遍歷每一個(gè)鏈接

1 window.onload=function()
2 {
3 for(var ii=0; i<document.links.length; ii++)
4 document.links$[$ii$]$.onfocus=function(){this.blur()}
5 }

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

1 function fHideFocus(tName){
2     aTag=document.getElementsByTagName(tName);
3   for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true;
4   //for(i=0;i<aTag.length;i++)aTag$[$i$]$.onfocus=function(){this.blur();};5 }

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

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

本文題目：去除input，a，按鍵鏈接時(shí)出現(xiàn)的虛線方法-創(chuàng)新互聯(lián)
標(biāo)題鏈接：http://www.chinadenli.net/article10/dgsddo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、軟件開(kāi)發(fā)、網(wǎng)站排名、App設(shè)計(jì)、標(biāo)簽優(yōu)化、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)