a{
blr:expression(this.onFocus=this.blur()); /* IE Opera */
outline:none; /* FF Opera */
}
a:focus{
-moz-outline-style: none; /* FF */
}
關鍵:a:focus, input[type=button] ,input[type=submit] { outline:none;}
話說,對于去除虛線框,即使是一個前端開發工作者,也可能不知道所有的潛規則。因為很多情況下,它是一個視覺上的輔助,并且盲人們需要它(怎么個需要法,別問我),我們并不需要去掉。但在圖片替換文字,或者虛線顯示不規則的時候,去掉它對于一個產品來說會是更完美的。
如何去除虛線框
對于如何去除虛線框,有很多人推薦這樣寫:
a:focus, input[type=button] ,input[type=submit] { outline:none;}
從這段代碼來看,讓我們小分析一下,有兩點可能是需要我們注意的:
去除不全面
IE6/7 并不支持 outline 屬性, firefox 下 input 的虛線并沒有去除
去除太多
除 IE6/7 外的所有瀏覽器的按鈕(firefox沒去掉)和鏈接都被去掉虛線框
這是看起來矛盾的兩個問題。其實不然,因為是兩個現同性質的問題。從技術上,這個方法并不全面。從體驗上,我想你也知道,我們只是去掉部分不需要的,去掉全部并不友好。所以,上面的寫法個人并不推薦。
關于潛規則、關于BUG
Demo: 去虛線框 | remove outline
我能在用 TAB 鍵的時候不去掉虛線框嗎?為什么我的 input 在 firefox 下沒有成功去除虛線框?這些問題被提出的時候,困擾著不少人。因為這里面有潛規則。總結一下,看這個表:
去除的方式
生效的瀏覽器
outline:none
IE8 | Firefox | Webkit |Opera
hidefocus
IE
:focus{outline:none;}
IE8 | Firefox | Webkit | Opera
:active{outline:none;}
同上,但在tab的時候,IE將保留虛線框
::-moz-focus-inner{outline:none;}
Firefox 存著bug,input 須要去這個偽狀態下的邊框
好吧,不得不承認的是,這些小事,都還真是一門學問,我們要好好學習,好好積累。多用點心,把東西做得更好。
From: http://topic.csdn.net/u/20100716/10/1100158f-5d78-410f-8783-d3d6a39ffd71.html