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

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

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

2

主题

6

帖子

16

积分

1°伸手党

Rank: 2

积分
16
发表于 19-4-7 13:27:47 | 显示全部楼层 |阅读模式         
在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。1 l2 [7 Y2 @' i; X

# s, o  E' I5 m7 C1 ^  这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。4 ^5 Z( B# x  F) k& I1 d3 Q- y

: s0 I: D1 t1 D( b/ c/ e  但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。  f0 i3 z! Y5 ]9 \: u3 y/ z2 I
( |/ U) O  ]6 t* v& z! K
  纯CSS去掉超链接或按钮点击时出现的虚线边框/ {2 o/ [7 c  S  d7 Z( h
+ |/ m) P2 @$ G: t
      CSS Code复制内容到剪贴板* \, M+ ]2 o# _5 U$ i* b9 x
  1. <style type="text/css">9 X1 o+ B, ~. ?3 H. Y' |
  2. a,input,button{ outline:none; }
    8 f8 f( T& l! j( W* ?
  3. ::-moz-focus-inner{border:0px;}
    7 Q) r3 N. E! {+ V8 A, }
  4. </style>& v/ m0 \- f  b. g0 w8 ^- b
  5. </head>$ ^# x- e5 M$ E- ~1 N) k
  6. <body>8 {  ~( D7 U& G/ [3 m8 \
  7. <a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
    ( Z, u- d+ {" @5 `
  8. <a href="http://www.admin10000.com" target="_blank">admin10000.com</a>$ F- a1 N9 |# z
  9. <input type="button" value="admin10000.com"/>' q4 J( v* j# L# G6 s3 f
  10. <button>admin10000.com</button>9 y6 z  T2 g5 F" g0 W/ {
  11. </body>
复制代码
" L! I* ?1 R1 ^+ R$ T; k
  从以上代码可以看出,可以通过设置CSS属性outline解决。/ y4 a. ^! e; X+ B! }

4 Y" Y* R  H, L3 k3 e: c  FF存在bug,其中input,button标签通过私有属性::-moz-focus-inner特别处理) ~6 U" q5 `7 c) b# \* W3 n

7 I" _" Z8 A6 g# z5 K  以上方法在IE6、IE7下无效。可使用 onfocus 属性解决,如下:
# R. U# f# @& g+ j& I- F9 o+ d* L( ~: U/ M+ W5 J9 I3 M' _5 k
      CSS Code复制内容到剪贴板
) o. K0 [0 G; U9 R9 d  
  1. <a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>
复制代码
1 q6 E3 ~2 Q7 F1 T% n7 h$ T5 p8 ^* P2 r
  使用jquery方法只需一句,非常简单,支持所有浏览器" O- z9 U% \0 I# `( @( ]3 ]5 Q
      JavaScript Code复制内容到剪贴板
) X4 S0 u3 p5 m3 Y$ U* q 
  1.  $("a,input,button").focus(function(){this.blur()});  
复制代码
pFXQdXJXJJ0Jz02E.jpg
网站简介

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