css 按钮的点击时候出现边框,尤其在bootstrap框架出现。

在使用 bootstrap框架中 发现 html按钮每次点击时都会出现一个黑色的边框,不是很美观。

在 bootstrap.min.css 中有下面这段代码影响:

1
2
3
4
5
6
7
8
9
.btn.active.focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn:active:focus, .btn:focus {
 
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
把按钮的样式改为
{
    outline:none
}

 这样可以解决 点击按下 边框没有了。但弹起按钮后还会出现黑色的边框。不太完美。

加上这句可解决这个问题。

1
button{outline:none;}  

 最终解决方案

1
2
3
4
5
6
7
8
<style type="text/css">
  .btn.active.focus,
  .btn.active:focus,.btn.focus,
  .btn:active.focus,.btn:active:focus,
  .btn:focus{ outline:none; }
 
  button{outline:none;}
</style>

 

 

  

posted @   海乐学习  阅读(2230)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
点击右上角即可分享
微信分享提示