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用于控制这里所说的虚线框的样式。(IE6、7不支持该属性。:focus伪类,IE6、7亦不支持。IE6、7:元素的hidefocus属性,不影响tab,只是隐藏虚线框。)
可以简单隐藏,a:focus{outline:none;}。
然而,因尽量承认虚线框突出当前焦点的合理性。
可以给focus定义替代样式。但定义:focus样式,效果在各浏览器有差异。例如,ie6、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 also see my outline.
结论:承认虚线框的合理性。必要时自己掂量着办...