html css 清除 button 选中时的边框样式 CSS outline属性

2021-01-23 14:59:09 470 收藏
分类专栏： Vue开发中的点点滴滴 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zl18603543572/article/details/113049326
版权

效果图一

在这里插入图片描述
目标图
在这里插入图片描述
方式只需要设置 button的样式为

button{
  outline:none;
 }
早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做，每一件事情还是有可能成功的，当然成功是没有界限的，只不过是达到自己心里的那个目标,公众号：我的大前端生涯，一个爱喝茶的程序员，通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
已标记关键词 清除标记
解决Button 按钮的点击时候出现边框的问题
静水流深
12-08 2万+
CSS控制Button 按钮的点击时候出现蓝色边框添加css属性，这样在点击安按钮的时候就不会有蓝色边框了 button{ outline:none; } 实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果 :focus {outline:none;} /*for IE*/ ::-moz-focus-inner {border-color: tra
表情包
插入表情
还能输入1000个字符
相关推荐
修改 input button 标签点击时的边框颜色以及消除
moon_tang的博客
07-28 3225
点击 input 会出现蓝色边框 1、消除点击时标签边框的蓝色 input { outline:none } 2、修改点击时标签边框颜色 button, input { outline-color: red; }
CSS 去掉按钮选中时的蓝色外边框
soindy
12-08 1万+
input,button,a { outline:0 none !important; blr:expression(this.onFocus=this.blur()); }
使用css样式设计一个简单的html登陆界面
adyyda的博客
09-05 1万+
利用DIV+CSS布局来制作一个登录页面 login.html部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <!--引入字体图标库--> ...
CSS消除button标签的默认样式
di84186的博客
12-03 602
//消除button的默认样式 margin: 0; padding: 0; border: 1px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果 　　 转载于:https://www.cnblogs.com/ron123/p/10059296.html...
html input输入框去掉点击时的阴影并添加圆角
xiejunna的博客
01-02 3077
&lt;input class="inputsty" type="text" name="" id="terid"&gt; .inputsty{ width: 70%; height: 30px; padding-left: 5px; display: inline-block; /* margin-left: 20px; */ -webkit-border-radius:...
去掉输入框、按钮等选中时的蓝色边框
wd7mxh38的博客
06-07 551
当我们在选中我们的输入框，或者是点击了按钮的时候，边框默认会显示为蓝色。 如下： 输入框： 按钮： 实际上，这个并不是他的边框。当我们将border设置为none的时候，蓝色依旧存在。 这个东西其实叫作outline，即轮廓。我们在css样式中，设置：input{ outline: none; } 可以发现，再选中的时候，蓝色轮廓消失了。 按钮也是一样的。 因此我们知道，要去掉任意组件的蓝色的轮廓，将outline设置为none，即可。 ...
button按钮如何去掉点击时边框
Bling Bling ~~
05-29 3735
正常我们写完后，给div这几样式时，点击边框一直存在 发现无论我们怎么设计点击后的效果，这个边框还是存在，后来我尝试了这个方法 outline: none 发现点击后确实没有了，但是一直按着边框就会出现 所以应该时单击事件引起的，那么我们改成这个 button:focus{outline: 0;} 最后就成功了 ...
input button去掉默认边框和选中边框
温故而知新的博客
05-16 2154
有时候需要去掉input的默认边框和选中边框，试了很久发现这样可以。 input{ border:0;/*去掉未选中边框*/ outline:none;/*去掉选中边框*/ background-color:rgba(0,0,0,0);/*透明背景色*/ }
去除button默认样式
then啥
07-14 3万+
  border: 0; background-color: transparent; outline: none;      
input 使用outline属性去掉淡蓝色边框不生效
立青的博客
02-26 1万+
1.常用的做法是使用outline:none 这个样式就可以了 &lt;html&gt; &lt;head&gt; &lt;title&gt; 测试 &lt;/title&gt; &lt;style type="text/css"&gt; input{ outl...
css 去除 button 点击之后的默认样式
anaction的博客
10-11 8543
HTML <button class="btn"></button> CSS .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: none; border-color: transparent; /...
css <a> 标签鼠标选中去除选中边框
Mchange的专栏
03-12 1918
IE： a href="#" hidefocus="true">a>  非IE： a:focus {       outline:none;   }
HTML自定义选取按钮（input样式的按钮）
legendaryhaha的博客
10-27 2万+
自定义文件上传按钮 谷歌浏览器下，默认的按钮是这个样子的： 火狐浏览器下是酱紫的： IE浏览器下是这个样子的： 个人表示真的丑陋，无法接受！ 修改 首先 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt
点击Button 出现选中框应该如何清除
心若向阳，无谓悲伤的博客
08-03 4426
今天在写界面的时候，发现按钮每次点击都会出现一个黄色的选中框，非常不好看，对于有强迫症的我来说这是不能容忍的。 去除方法也很简单，我看很多人说设置这个属性就可以： {outline：none;} 但是我加了之后，发现还是存在，后来我发现设置outline的同时，添加如下属性，则黄色框消失，点击就不会再出现了。 { outline：none; outline-color: r...
如何去掉button、img、a点击时的边框
flting1017的博客
12-13 1万+
在做页面的时候，有时候会发现点击一些按钮会自带一些边框，这是浏览器添加的，但是自己并不想要，那么很简单， 就是在给这些有按钮的地方去掉边框 css添加：outline：none 有时候发现点击img的时候也会有，但是添加这个css并没有解决，怎么回事？ 其实img本身是点击没有任何边框的，基本是自己添加了有点击效果的标签，例如a，看看自己写的时候是不是这样： 这时候点击图片的时候就会
button在点击时出现边框
我有个橘子
01-09 3万+
问题描述： 在自己做东西时遇见了这么个问题，button在chrome浏览器下被点击时会出现一个橙色的边框 即使当时在button上添加 :focus{outline:none;} 也无法解决问题，很急。 解决办法：在button上添加 :focus{outline:0;} 才得以解决。 思考来源： 转自：http://blog.csdn.net/qq_2622
Shell中字符串的切割、拼接、比较、替换
Steve_Abelieve
08-06 5万+
【截取】一、Linux shell 截取字符变量的前8位，有方法如下：1.expr substr “$a” 1 8 2.echo $a|awk ‘{print substr(,1,8)}’ 3.echo $a|cut -c1-8 4.echo $ 5.expr $a : ‘(.\).*’ 6.echo $a|dd bs=1 count=8 2>/dev/null 补充： expr(选项)(参数
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页