解决Button 按钮的点击时候出现边框的问题

最新推荐文章于 2024-04-17 10:07:22 发布
最新推荐文章于 2024-04-17 10:07:22 发布
阅读量3.5k 收藏 3
点赞数
CC 4.0 BY-SA版权
文章标签： html5 html css css3 javascript
原文链接：https://blog.youkuaiyun.com/qq_26941173/article/details/78752648
本文介绍如何通过CSS解决Button按钮点击时出现的蓝色边框问题，适用于多种浏览器，包括IE和Mozilla。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决Button 按钮的点击时候出现边框的问题

CSS控制Button 按钮的点击时候出现蓝色边框

添加css属性，这样在点击安按钮的时候就不会有蓝色边框了

 button{
   outline:none;
  }

实对于button的outline设置需要这样来设置,才能达到所有浏览器一样的风格效果

:focus {outline:none;} /*for IE*/
::-moz-focus-inner {border-color: transparent;} /*for mozilla*/
云城雪华
关注
多个相邻按钮切换效果出现边框重叠问题的解决方法
xm2by的博客
11-30 1912
多个按钮切换时处于选中状态按钮的边框出现重叠问题的解决方法 element和ant-design中对于这种多按钮切换时边框重叠问题的解决方法相同，具体如下： 在这里插入代码片 ...
button点击出现边框
qq_41603606的博客
05-21 1988
Button按钮点击后出现蓝色边框在修改button按钮样式之后，点击button按钮出现了蓝色边框 在修改button按钮样式之后，点击button按钮出现了蓝色边框 添加css属性，这样在点击安按钮的时候就不会有蓝色边框了。 button{ outline:none; } 谷歌浏览器中button按钮的边框如何去除 谷歌浏览器中button按钮的边框怎么去除 在谷歌浏览器中点击一个butto...
手机中点击链接或button按钮出现黄色边框的解决办法
weixin_34008933的博客
09-13 1909
a,input,button{outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0);} 或a,button,input{outline: none; -webkit-tap-highlight-color: rgba(255, 2...
pc端Button 按钮的点击时候出现蓝色边框。。。
fb_01的专栏
12-19 929
1、原因：受button标签的outline属性的影响 2、解决方法：添加css属性 button{ outline:none; }
redis分布式锁的实现（setNx命令和Lua脚本）
热门推荐
lzf的博客
05-27 8万+
前言 本篇文章主要介绍基于Redis的分布式锁实现到底是怎么一回事，其中参考了许多大佬写的文章，算是对分布式锁做一个总结 分布式锁概览 在多线程的环境下，为了保证一个代码块在同一时间只能由一个线程访问，Java中我们一般可以使用synchronized语法和ReetrantLock去保证，这实际上是本地锁的方式。但是现在公司都是流行分布式架构，在分布式环境下，如何保证不同节点的线程同步执行呢？ 实际上，对于分布式场景，我们可以使用分布式锁，它是控制分布式系统之间互斥访问共享资源的一种方式。 比如说
button在点击后出现一个黑色的边框
brilliantSt的博客
04-30 7309
问题描述： button按钮在点击后出现一个黑色的边框，任意点击其它位置就消失，如图： 解决方法： 这个边框是button在获取焦点时 outline 的默认样式，所以在获取焦点是删掉即可，代码如下： button:foucs{ outline:0; } 参考博客： 博客地址 ...
解决搜索框和搜索按钮button边框不能重合的问题
01-18
今天在用百度页面做练习的时候突然发现，尽管设置了搜索框和button的margin值和padding值各为0，他们俩的边框还是不能重合（不想用position） 无奈之下问了老师，老师说设置他俩的父元素的font-size为0就行，因为父...
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
08-27
主要介绍了微信小程序分享功能之按钮button 边框隐藏和点击隐藏,需要的朋友可以参考下
Uniapp 各类 button按钮
09-12
在移动应用开发中，按钮（Button）是用户界面不可或缺的元素，它承载着用户的操作行为，如点击提交、打开新页面、执行特定功能等。在 UniApp 开发框架中，Button 组件扮演着同样的角色，提供了丰富的样式和交互功能...
elelment-ui中messagebox弹框问题
weixin_30376163的博客
06-12 553
在移动端使用messagebox弹框时 蒙层是从下往上动画形式进页面，出则相反 而弹框内容是与蒙层相反 取消弹框动画未知。。。（个人觉得应该是后台js控制） 取消蒙层动画可以将其css的animation设置为none // v-modal为蒙层的class， 此方法只能设置在全局css中覆盖，也就是设置后，所有的蒙层都将取消动画 .v-modal{ animation:...
elementUI MessageBox 弹框button去除蓝边，改用el-dialog
weixin_43951592的博客
03-16 1726
如图所示，确定按钮是蓝色的，即使重写其样式，改了背景色之后，其outline的颜色还是无法改变，取消按钮一样，点击之后都会有一圈蓝边。 本人是这样解决的，直接改成用 el-dialog，然后 把红色部分的type删掉就可以了 <el-button @click=“dialogVisible = false”>取 消< /el-button> <el-button type=“primary” @click=“dialogVisible = false”>确 定 <.
el-button 去除边框,hover保留
qq_36775019的博客
09-28 8981
el-button 要想按钮普通情况没有边框 , hover及其它效果有边框 , 可以加 type=“text” 属性
el-button type=text 文字按钮 边框去除和添加
yssa1125001的博客
08-14 8451
<el-button v-if="$hasPermission('sys:user:detail')" type="text" plain style="margin:auto 0px auto 10px;" size="small" @click.
element-plus中的按钮点击后会有黑色边框
m0_68937827的博客
04-17 757
在全局里加上这个样式就可以了。
android 给 button 添加边框及底色
软件开发积累
07-16 2万+
此文版权属于作者所有，任何人、媒体或者网站转载、借用都必须征得作者本人同意！ [java] view plaincopy GradientDrawable drawable = new GradientDrawable();   drawable.setShape(GradientDrawable.RECTANGLE); // 画框   dr
button被点击后的蓝框 css button 的四种状态
moon_tang的博客
09-18 1万+
1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态 focus 经常用来取消a链接点击后产生的虚线边框 a:focus{ outline: none; } <style type="text/css"> .btn { color: white; background-col...
Button 按钮的点击时候出现蓝色边框
weixin_42645716的博客
02-22 5500
这种默认蓝色边框，有时候感觉它很固执，有时候感觉完全可以轻松应对。 直接附上效果。 谷歌浏览器： 火狐浏览器： 代码： &lt;input class="selectFile" type="text" title=""&gt; &lt;input class="selectFile" type="submit" title=""&gt; input,
解决element中 el-button按钮 移入后移出时背景颜色不恢复问题（最简单方法（自认为哈哈））
weixin_46069849的博客
06-21 5519
在el-button中加入原有背景颜色以及边框颜色 <el-button style="background: #409EFF; border: 1px solid #409EFF"></el-button> 加入hover 移入效果 .currenBtn:hover { opacity: 0.8; } 自测后有惊喜
button 按钮的边框 border 怎么去除
zlq_优快云的博客
03-15 6630
这次在我开发微信小程序的时候，发现一个问题：微信小程序中的button组件存在特定的css样式，我们可以通过 “ background：none；” 来去除背景色，但是呢，边框用“border : none”是去不了边框的，这也是微信小程序与h5的不同之处。 解决：在微信小程序中使用 ::after 选择器就可以实现这一功能。 传统：“border:none;”，来去除边框依旧有一条细细的bo...
winform的button被点击的时候边框会变粗
最新发布
03-25
### WinForms Button 控件点击时边框变粗的解决方案 在 Windows Forms 中，当按钮（`Button`）被点击时，默认行为可能会导致其边框看起来更粗。这种现象通常是因为焦点矩形（Focus Rectangle）的效果所致[^1]。以下是几种可能的解决方案： #### 方法一：自定义绘制按钮 通过重写 `OnPaint` 方法来自定义按钮的外观，可以完全控制按钮的渲染效果。 ```csharp public class CustomButton : Button { protected override void OnPaint(PaintEventArgs pevent) { base.OnPaint(pevent); // 移除默认的焦点矩形 this.FocusRectangle = new Rectangle(0, 0, 0, 0); using (Pen pen = new Pen(Color.Black)) { // 自定义边框颜色和宽度 pevent.Graphics.DrawRectangle(pen, new Rectangle(0, 0, this.Width - 1, this.Height - 1)); } } protected override bool ShowFocusCues => false; // 隐藏焦点提示 } ``` 此方法通过禁用默认的焦点显示并手动设置边框样式来解决问题[^2]。 #### 方法二：修改 FlatStyle 属性 可以通过调整 `FlatStyle` 属性为 `Flat` 或其他选项，减少或消除边框变化的影响。 ```csharp button1.FlatStyle = FlatStyle.Flat; button1.FlatAppearance.BorderSize = 0; // 设置边框大小为零 ``` 这种方法简单有效，适用于大多数场景，并能显著改善视觉体验[^3]。 #### 方法三：处理事件隐藏焦点 如果不需要显示焦点，则可以在 `Enter` 和 `Leave` 事件中动态更改属性以隐藏焦点矩形。 ```csharp private void button1_Enter(object sender, EventArgs e) { ((Button)sender).FlatAppearance.MouseOverBackColor = Color.Empty; } private void button1_Leave(object sender, EventArgs e) { ((Button)sender).FlatAppearance.BorderColor = Color.FromArgb(0, 0, 0); // 不可见的颜色 } ``` 这种方式通过对鼠标悬停状态下的背景色和边框颜色进行微调，间接解决了边框增厚的问题[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值