腾讯云网站解决方案帮您轻松应对建站成本高/网络不稳等常见问题

[其他] 使用CSS去掉超链接的虚线边框的方法

0
回复
1309
查看
[复制链接]

2

主题

4

帖子

16

积分

1°伸手党

Rank: 2

积分
16
发表于 19-4-7 13:27:47 | 显示全部楼层 |阅读模式         
在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。
* {# g3 k# A4 x( a! @1 I& f  ^/ `& B8 U* N, B" k0 [5 u
  这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。
! Z+ z  G8 T" }7 U$ Q& i0 N
* Z* ~& F& a8 u; N! v  但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。0 h  ]+ J) M$ J8 ]; y6 W; o
" q" Q* X- ?8 |( f$ t
  纯CSS去掉超链接或按钮点击时出现的虚线边框- C7 {! X" k) ?5 {5 U" S+ X4 G
( @' G8 ]8 d" X- d$ |/ b2 T, X
      CSS Code复制内容到剪贴板7 V0 b) G7 O4 k; U% ~& K6 N; i
  1. <style type="text/css">
    ! y7 E: ~. L& Q  Y. L5 t; E2 W: l. a
  2. a,input,button{ outline:none; }. }2 H6 ?) f$ ^% @+ B+ a  m
  3. ::-moz-focus-inner{border:0px;}8 G8 h  j- j1 C2 a) G5 G
  4. </style>3 Q$ d) ]( e* A
  5. </head>
      L3 [" h) c0 |0 \
  6. <body>; R( H+ {) V, a4 g0 W
  7. <a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>) i" _3 O; R; N" j, I! R; I$ @
  8. <a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
    / k5 [/ [  {6 @) N: Y* N5 ~7 D
  9. <input type="button" value="admin10000.com"/>* t! k7 t5 K, x$ T$ s0 ^! t
  10. <button>admin10000.com</button>
    4 N  H% L7 X" U& v
  11. </body>
复制代码

, g" o2 ^: O( i2 J4 A0 e  从以上代码可以看出,可以通过设置CSS属性outline解决。
6 ]+ T0 ?: d( `! |/ i. ~  s& ~  _% I% }* D* j! E! @; w
  FF存在bug,其中input,button标签通过私有属性::-moz-focus-inner特别处理
: C7 t* u( v3 `/ O+ a, a* u+ {8 h1 E- y! N; u6 A
  以上方法在IE6、IE7下无效。可使用 onfocus 属性解决,如下:6 D$ B& v# ~, |5 q/ d6 f: L) O
1 O% P* E: u. O) z& [- x
      CSS Code复制内容到剪贴板
# ~3 C2 y3 M; n9 l6 _, j  
  1. <a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>
复制代码

8 Z5 j7 r& \0 b9 {" e2 U) b  使用jquery方法只需一句,非常简单,支持所有浏览器( F+ U; I) t$ V5 k0 U* ^
      JavaScript Code复制内容到剪贴板% a2 |$ G  x. U7 T; ~3 c
 
  1.  $("a,input,button").focus(function(){this.blur()});  
复制代码
pFXQdXJXJJ0Jz02E.jpg
网站简介

球球发,是一家 Discuz! 商业插件、风格模板、网站源码、 Discuz!运营维护技术等于一体的交流分享网站,全站95%的资源都是免费下载,对于资源我们是每天更新,每个亲测资源最新最全---球球发(如果我们有侵犯了您权益的资源请联系我们删除