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> |
分类:
HTML
, H+ bootstrap框架
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)