连接、单选按钮虚线框与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.

---

 

结论：认可虚线框的合理性。必要时本身掂量着办...