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

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

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

2

主题

0

帖子

16

积分

1°伸手党

Rank: 2

积分
16
        
发表于 19-4-7 13:27:47 | 显示全部楼层 |阅读模式
在前端制作的过程中会发现,一些文字/图片链接,或者一些input控件,在点击时会在周围出现虚线边框,一般会在火狐和IE浏览器下出现虚线框,谷歌下不会有。
& x4 B! M# A8 k- [( K1 b! j2 J; n# L8 X0 I3 F
  这些虚线边框是作为对视觉设计的一种辅助,在不使用鼠标,而用键盘Tab键进行页面浏览时,会标示出当前所在的链接或控件的位置,便于浏览。这对那些视觉有障碍的人士来说更是必不可少的。6 Z  N$ k, k7 N) `

: P  g% @9 `3 H. s  但是有些时候我们却不想使用它们,因为浏览器对虚线框的解析有差异,并且不规则,所以在视觉设计上反而成为了某种缺陷。所以这种时候,我们想要禁用这些虚线边框,使浏览者的视觉享受能够完美无瑕。
$ d) |9 H1 T+ a- `" U: a3 H5 D+ b( I
  纯CSS去掉超链接或按钮点击时出现的虚线边框
) L8 p  j! G6 P& M/ t$ E+ I
" E% C8 Y/ [# n0 C3 M      CSS Code复制内容到剪贴板
: g, G5 g3 v4 }- {( M# C+ h
  1. <style type="text/css">
    . A1 f3 g* t) V& Z" J  p+ h) _
  2. a,input,button{ outline:none; }" k. W6 R) @* X7 Z( {0 B
  3. ::-moz-focus-inner{border:0px;}
    6 p/ L0 A, Y% O) X" R" }! W( f
  4. </style>  J9 _; i; ~* s- J% B
  5. </head>
    % J% l/ W0 v7 c. D- P
  6. <body>
    7 z9 M* r# R( F
  7. <a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>% M, g: O! s; a0 t( E
  8. <a href="http://www.admin10000.com" target="_blank">admin10000.com</a>' F1 F1 v) r( {% [3 W- D4 ]7 f
  9. <input type="button" value="admin10000.com"/>
      l3 p" Q, I9 D$ G  f
  10. <button>admin10000.com</button>8 b$ M$ k$ m5 r6 i7 ]$ t$ k/ Q
  11. </body>
复制代码

) Q3 t1 q, E. K5 B  j: w) \7 n  从以上代码可以看出,可以通过设置CSS属性outline解决。" t) x1 X/ F& M5 A% L
2 N* W0 y+ u$ y# f7 u8 V
  FF存在bug,其中input,button标签通过私有属性::-moz-focus-inner特别处理
" f# }1 a, ^' C
- u- o0 _+ E9 F3 z# F2 H- j( ?  p  以上方法在IE6、IE7下无效。可使用 onfocus 属性解决,如下:
1 K! Y7 q8 u9 `/ D: c7 J9 a! H9 v
% R! J, E% D& J6 q: d      CSS Code复制内容到剪贴板
; ]/ ^* U$ U9 A, T2 {+ B! E% j  
  1. <a href="http://www.admin10000.com" target="_blank" onfocus="this.blur()">admin10000.com</a>
复制代码
4 }9 \2 c/ e* U  m) ?2 K
  使用jquery方法只需一句,非常简单,支持所有浏览器9 W5 t0 b9 c. z$ @/ A
      JavaScript Code复制内容到剪贴板' p5 X5 P4 I! Y- a
 
  1.  $("a,input,button").focus(function(){this.blur()});  
复制代码

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

qiuqiufa.com

网站简介

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