CSS去除input和button默认黑色边框

最新推荐文章于 2023-04-02 22:19:15 发布
最新推荐文章于 2023-04-02 22:19:15 发布
阅读量5.3k 收藏 9
点赞数 2
分类专栏： 前端总结 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42539194/article/details/113408564
版权

 今天在练习用纯JS写登录页面的时候遇到了样式问题，就是我设置边框是青色的，但是鼠标悬浮、和鼠标点击时候竟然多出了一个难看的黑色边框，以前都是用各种UI框架，从不会出现这个问题。经查才发现竟然有个CSS属性较outline。简单记录下方便下回用。具体如下图：

 1.问题描述图

2.问题解决办法

加上outline:none

3.解决后效果

韦_恩
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
css里button 自带的黑色的线是什么_实用优先的CSS框架设计引擎，快速实现定制化——Tailwind.css...
weixin_39561179的博客
11-29 110
介绍Tailwind CSS是高度可定制的CSS框架，可提供构建定制设计所需的所有构建基本模块，而无需烦恼要固定的使用某一些样式，这其实就是因为大多数CSS框架做得太多，它们带有各种预先设计的组件，例如Button、Card和Alert，它们一开始可能会帮助你提升开发效率，但是当使您的网站以自定义设计脱颖而出时，它们所带来的痛苦真的会让人受不了！Tailwind 作为css的设计引擎，定能解决这样...
BUTTON和INPUT的区别
10-31
### BUTTON和INPUT的区别 在网页开发中，`<button>` 和 `<input>` 是两种常见的用于创建用户交互元素的HTML标签。尽管它们都能实现按钮的功能，但在实际应用中却有着本质的区别。 #### HTML4.01规范中的表单控件 ...
html 取消按钮下黑边,button在IE6/7下的黑边去除方案
weixin_39985820的博客
07-01 745
好久没有处理过IE6下的兼容问题了，今天有朋友碰到过input[type="submit"]和button[type="submit"]在IE6-7下会出现黑边，就算是你在样式中重置了一个border属性也是如此。真是蛋疼的很。后来经过查找相关的资料，终于找到了解决方法，放上来与大家分享一下，这个问题有可能不只一个人会碰到。(^_^)在介绍如何处理这个bug之间我们一起来回顾一下，在IE6-7下，...
浏览器字体大小设置_CSS之 浏览器解析样式的过程
weixin_39633917的博客
11-14 166
阅读本文约需要10分钟大家好，我是你们的导师，经常看我朋友圈的同学应该知道，我每天会在微信上给大家免费提供以下服务！1、长期为你提供最优质的学习资源！2、给你解决技术问题！3、每天在朋友圈里分享优质的技术文章！4、每周1、3、5送纸质书籍免费送给大家，每年至少送书800本书！5、为大家推荐靠谱的就业单位！请注意！我上面说的5点全部都是免费的！全网你应该找不到第二家吧！当然，大家在我私人微...
CSS - 开启 contenteditable 属性时，去掉点击编辑时显示的 “黑边框“（完美解决方案）
王佳斌
04-02 2974
contenteditable获得焦点后的边框设置，css如何去掉contenteditable属性的边框，vue怎么去掉contenteditable 属性边框，contenteditable 属性开启后点击有边框，删掉css contenteditable 属性的边框，css取消可输入标签聚焦时contenteditable的边框，contenteditable属性编辑器在手机看，获得焦点会有一个框outline没效果，怎么去掉？如何删除聚焦的 contenteditable pre 周围的边框？css
CSS：去除input和button边框以及选中时边框默认样式
道阻且长，行则将至。
07-16 2003
CSS：去除input和button边框以及选中时边框默认样式 <input type="text"> input{ border: 0; // 去除未选中状态边框 outline: none; // 去掉外边的蓝色边框 background-color: rgba(0, 0, 0, 0);// 透明背景 } Button 按钮的点击时候出现蓝色边框的问题 button{ outline:none; } ...
button去除黑框
热门推荐
滕青山博客
07-31 2万+
代码】button去除黑框。
IE6/7下多种方法移除button、input 默认边框和去掉焦点线
12-11
一、去掉边框： ...通常解决这样的bug最好的方法就是在button和input的标签外添加一个标签，然后将样式写在这个标签上，并且把button和input的默认样式都去除掉。 实现方式一：设置CSS： 复制代码
使用CSS去掉超链接的虚线边框的方法
09-25
在网页设计中，超链接（`<a>`标签）和其他交互元素如输入框（`<input>`）和按钮（`<button>`）在被点击时，可能会显示一个虚线边框，这是浏览器为了帮助用户识别当前焦点所在位置而提供的默认行为。特别是对于使用...
XHTML语言默认的CSS样式
12-03
7. **其他样式**：`button`, `textarea`, `input`, `object`, `select`等表单元素默认为`display: inline-block`，允许它们在一行内显示。`abbr`, `acronym`元素的`font-variant`设为小型大写字母，`letter-spacing`...
CSS去除 ＜input＞ 选中后的黑框
m0_52575541的博客
07-21 7076
CSS去除 选中后的黑框
button在点击后出现一个黑色的边框
brilliantSt的博客
04-30 6684
问题描述： button按钮在点击后出现一个黑色的边框，任意点击其它位置就消失，如图： 解决方法： 这个边框是button在获取焦点时 outline 的默认样式，所以在获取焦点是删掉即可，代码如下： button:foucs{ outline:0; } 参考博客： 博客地址 ...
如何将button或是input框外面的黑色边框线去掉
YodgeGGG的博客
12-09 2484
如何将button或是input框外面的黑色边框线去掉 简单一句话 outline:none
【表单】如何去掉input被点击选中时的黑色边框
sszsdvv的博客
07-17 2万+
问题描述 在制作表单时，想改变input被点击后的边框样式，却发现怎么修改被点击后的input输入框都存在黑色实线 问题原委 如图所示，该黑色实线是出在input的外边框，可判断为outline属性。 outline属性是在一个声明中设置所有的轮廓属性。 解决方案 1.直接给input添加outline：none； input{outline: none;} 2.在input：focus中添加outline：none。（当元素获得焦点时（当通过鼠标点击选中元素或通过 tab 键定位到元素时），发生 fo
css控按钮的点击时候出现边框
大董的博客
01-03 1万+
今天测试偶然发现一个问题，页面上的按钮每次点击时都会出现一个黄色的框，然后各种查看自己写的样式表，没有发现自己控制这个呀 ，后来在引入的bootstrap框架中发现了这样的代码： .btn.active.focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn:active:focus, .btn:focus {    
去掉浏览器 :focus 黑边 黑框
weixin_44484873的博客
03-25 1598
去掉浏览器 :focus 黑边 outline:none
移除button点击时的黑边
weixin_30408309的博客
06-21 2512
input[type=submit], input[type=reset], input[type=button]{ outline:none; filter: chroma(color=#000000); } 参考：如何移除button在IE67下的黑边 转载于:https://www.cnblogs.com/oufeng/p/7058191.html...
怎么去除input标签button按钮的边框
最新发布
06-06
可以通过CSS样式来去除input标签button按钮的边框。具体做法如下： ```css input[type="button"], input[type="submit"], input[type="reset"] { border: none; /* 去除边框 */ outline: none; /* 去除点击时的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

韦_恩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值