a标签、button灰色边框如何去掉

2018/04/2015:58:36a标签、button灰色边框如何去掉已关闭评论 138

在前端的网页中,点击链接的时候,我们希望不要出现边框之类的影响美观的东西。

button带一个灰色的边框,很难看,有时反复操作之后边框会消失,google了一下html focus border,问题得解:outline:nonebutton带一个灰色的边框,很难看,有时反复操作之后边框会消失,google了一下html focus border,问题得解:outline:none
使用的closure中dialog,绘制一个close button超出右上角的对话框,发现弹出时这个button都带一个灰色的边框,很难看,有时反复操作之后边框会消失,一直以为是closure的问题.后来用firefox看,边框是一个包了对话框和close button的矩形虚边框,所以感觉是focus之后的效果.google了一下html focus border,问题得解:outline:none

html去除input 聚焦时的边框 以及button按钮的边框?html中,当input标签获取焦点的时候, input标签外围会出现边框,有的时候我们需要去掉这个边框,可以给input设置 outline:none;属性将其去掉。.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {  outline: none;    border-color: transparent;   box-shadow:none; background:#77bc1f; color:#fff;}

button的四种状态 focus 伪类:1.普通状态2,鼠标hover状态  3.active 点击状态  4.focus 取得焦点状态---
a、button、input点击出现蓝色边框,如何去掉?a,button,input{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);       -webkit-user-modify: read-write-plaintext-only;}

可根据实际情况添加
outline: none;或box-shadow: none;有时候<img />图片放在a标签里也会出现边框,可设置图片的边框为0.除此之外还要注意其伪类的设置。

js方法:onclick="this.blur()"

a标签取消点击的边框

如何去除移动端链接a标签产生带色边框?
还记得刚到公司第一次写移动端WEB页的时候,测试时发现点连接的a标签点击时会有一个很丑的边框出现,很是影响页面美观;小狂我用尽各种办法,最后终于解决了这个问题。
样式代码如下
a{
border:none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color:transparent;
outline:none;
}
会出现这样的问题是因为:
-webkit-tap-highlight-color是ios和android下点击元素时出现的阴影。

-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent; 都可以将该阴影透明化,进而解决那个丑丑的边框问题。

附带一段CSS代码,实测有用:
a {text-decoration: none;outline:none;box-shadow: none;border:none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outline:none;}

a:focus {outline:none;-moz-outline:none;}

 

历史上的今天:

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar