連接、單選按鈕虛線框與focus:this.blur()與outline

10-13
http://taligarsiel.com/Projects/howbrowserswork1.htm#The_main_flow

去除單選按鈕/連接獲取焦點時虛線框

 

一種解決方法：onfocus = "this.blur()"

在點擊後當即使其失去焦點。很好達到去除虛線框的效果，各瀏覽器均有效。但此時tab鍵失效，在點擊該連接or單選按鈕後失去焦點，tab沒法向下選擇。

從實現方法上來講也違背了正常的邏輯。同時關於this.blur()的利弊可參見下此博文：關於使用onfocus=」this.blur()」的利與弊

 

另外一種解決方法：a:focus{定義outline屬性}

outline屬性：【outline （輪廓）是繪製於元素周圍的一條線，位於邊框邊緣的外圍，可起到突出元素的做用。輪廓線不會佔據空間，也不必定是矩形。】

outline用於控制這裏所說的虛線框的樣式。（IE六、7不支持該屬性。:focus僞類，IE六、7亦不支持。IE六、7：元素的hidefocus屬性，不影響tab，只是隱藏虛線框。）

能夠簡單隱藏，a:focus{outline:none;}。

 

然而，因儘可能認可虛線框突出當前焦點的合理性。

能夠給focus定義替代樣式。但定義:focus樣式，效果在各瀏覽器有差別。例如，ie六、7不支持，so一直是小虛線框，ie8/9沒什麼問題，只是單選按鈕會顯示背景色，若是設定了。firefox下一切正常，單選按鈕無背景色。chrome，不響應對單選按鈕、a:focus定義，有文本框有效。但tab鍵時會有默認樣式突出顯示當前焦點元素。

 

http://css-tricks.com/removing-the-dotted-outline/
Because that outline was providing an important accessibility feature, you should really (really) consider adding back in a style for your links focus and active states.

http://www.outlinenone.com/#test1

If you must remove it, provide alternative styling

• Give it a background colour - Test background colour change
• Change the text colour (don't forget to make it high contrast for colour blind people!) - Test text colour change
• Provide a custom outline - Test text outline change
• Go high visibility - Test high visibility

與:hover,:active同時定義:focus.

Personally, I just like to make them the same as the hover state. It's about the same thing, as far as actual function. Whatever your hover state is, even if it's shifting a background image or changing size or whatever, it can be joined with the active and focus states. Like so:

a:hover, a:active, a:focus {  // styling for any way a link is about to be used }

測試：

---

click me, you can see my outline.
click me, you can see my outline.
click me, you can see my outline.

click me, you can also see my outline.

---

 

結論：認可虛線框的合理性。必要時本身掂量着辦...