如何去除虚线框
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 须要去这个伪状态下的边框 |
好吧,不得不承认的是,这些小事,都还真是一门学问,我们要好好学习,好好积累。多用点心,把东西做得更好。
做前台开发时肯定会遇到使用button,a标签的时候,每次点击相关这些标签的时候,我们会经常看到有一个虚线框出现,从视觉效果来看,有虚线框会很刺眼,形象到用户浏览的视觉中心,所以我们有必要将这个刺眼的虚线框去掉。利用google和百度,整理一下相关的方法,方便以后开发当中使用。
<input id="" hidefocus=true type="button" οnfοcus="this.blur();" value="" />
方法一:使用css方法
- a {blr:expression(this.onFocus=this.blur())} /*for IE*/
- a {outline:}/*for FireFox*/
IE浏览器下面还可以使用IE下的私有的html属性:hideFoucs,在标签的结构中加入hidefocus=”true”属性。即:
- <a href="http://www.g.cn" hidefocus="true" title="谷歌">谷歌</a>
方法二:使用javascript方法:
通过javascript遍历页面Dom
- window.onload=function()
{ - for(var i=0; ii<document.links.length; ii++)
- document.links$[$ii$]$.onfocus=function(){this.blur()}
}
Javascript封装为函数
- function fHideFocus(tName){
aTag=document.getElementsByTagName(tName); for(i=0;i<aTag.length;i++)aTag$[$i$]$.hideFocus=true; //for(i=0;i<aTag.length;i++)aTag$[$i$]$.οnfοcus=function(){this.blur();}; }
当前是添加一个hidefocus的属性,注释掉的句子是添加οnfοcus=this.blur();
然后调用fHideFocus(”A”),即可把a的虚线框去掉
通过传递不同的参数,可以去掉更多的虚线框,比如”BUTTON”可以去掉button的
但要记住参数要用大写字母