在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。
这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。
但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。
那么,如何去除这些点击时才会出现的虚线边框呢?
1. outline:none;
通常我们会这么写:a,input{outline:none;}
优点是代码简洁,使用一行css就能解决问题,但是也有缺点:ie6、ie7并不认识outline属性,需要配合仅ie6和ie7支持的css属性 blr:expression_r(this.onFocus=this.blur());使用来达到兼容,expression 条件,这句话的意思是链接在获得焦点的同时失去焦点,但是blr不宜多用,会影响效率。
2. hidefocus=”true”;
hidefocus是ie系列的专有属性,能够作用于所有ie序列的浏览器,需要配合css的outline:none。
也可以写作:hidefocus=”hidefocus”;
另外,hidefocus并不是W3C推荐的标准属性。
缺点是非全局控制,需要在每个需要去虚线边框的链接或input上加代码。
3. onfocus=”this.blur()”;
优点是比较通用。
缺点也很多,首先同2一样,也是属于局部控制的手段,需要在每一个需要去虚线边框的标签上使用;
然后这是属于script范畴,对于禁用JavaScript的用户来说不起作用;
将script直接写在html中对于页面效率有负面作用。
该方法需要与border:none;配合使用。
4. :active{outline:none;}
与1大致相同,唯一的区别是会在Tab键切换时出现虚线边框。
5. ::-moz-focus-inner{outline:none;}
Firefox的专有属性,在去除input的虚线边框时需要使用到此属性。
但是经测试,应该对select无作用。
6. 使用JS遍历每一个链接
window.onload=function() { for(var ii=0; ii<document.links.length; ii++) document.links$[$ii$]$.onfocus=function(){this.blur()} }
相关推荐
隐藏文字,此效果在 IE 中是正常的,但在 Firefox 里,鼠标点击该链接时,虚线框却会包住被缩进的文字,结果显示为虚线框 N 长。 因为平时是用overflow:hidden; 属性的,所以一直也没有注意到这个问题的存在,但...
这是一款效果非常炫酷的CSS3按钮边框动画特效。这组按钮边框动画共有6种不同的效果。当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷。
flipside是一款使用css3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效。该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的。
css3点击按钮发光效果是一款当你点击按钮时,中间会有发光,并向外扩散的淡光效果。 css3点击按钮发光效果演示图:
css按钮样式
CSS3实现鼠标悬停链接按钮代码是一款鼠标悬停动画按钮特效代码。
深藏多年秘笈大公开,全世界唯一一家公布,怎么点就是点不出,纯CSS去掉按钮或者链接点击产生的虚线。
介绍: 方法二: 在页面中加入下面CSS代码即可
CSS样式按钮CSS样式按钮CSS样式按钮
CSS实现超级炫酷的流光按钮效果 在网页中实现文字的一个一个出现
之前我们介绍过很多漂亮的CSS3按钮,...今天我再向大家分享一款有特色的CSS3按钮,该按钮带有Tooltip功能,鼠标滑过按钮时即可显示Tooltip,另外按钮还有一个漂亮的图标。这款CSS3按钮整体是绿色清新风格,非常不错。
css_实现虚线 css_实现虚线 css_实现虚线
checked.css-超酷CSS3复选框和单选按钮点击动画库
CSS经典圆形按钮
js代码 [removed] const button = document.querySelector('.button');... css3点击提交按钮加载进度条动画特效是一款简单美观的css3点击表单提交按钮、显示图标加载进度条的按钮加载动画特效。
使用css实现多种特效 全部效果: 1.默认三种主题:确认、取消、警告,适用于以下所有特效 2.流光效果:流光背景、流光边框 3.边框效果:双旋转边框、单旋转边框、呼吸效果边框 4.滑动效果:反光滑动、箭头滑动、中央...
纯css3鼠标经过按钮边框动画特效
CSS简单大气按钮