button按钮如何去掉点击时边框

最新推荐文章于 2024-04-26 22:14:41 发布
最新推荐文章于 2024-04-26 22:14:41 发布
阅读量8.7k 收藏 6
点赞数 5
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FannyIf123/article/details/106426963
版权

正常我们写完后，给div这几样式时，点击边框一直存在
在这里插入图片描述
发现无论我们怎么设计点击后的效果，这个边框还是存在，后来我尝试了这个方法

outline: none

发现点击后确实没有了，但是一直按着边框就会出现
在这里插入图片描述
所以应该时单击事件引起的，那么我们改成这个

button:focus{outline: 0;}

在这里插入图片描述
最后就成功了

兜兜风~
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
PostCSS详细介绍
技术探秘者的博客
04-26 598
PostCSS是一个强大的CSS处理工具，它可以用来转换、优化和格式化CSS代码。与传统的预处理器（如Sass和Less）不同，PostCSS不是一种新的CSS语法，而是一个基于JavaScript插件的工具，可以灵活地扩展和定制。本书将详细介绍PostCSS的原理、用法和常见插件，帮助读者快速掌握PostCSS的使用技巧和优化方法。
elment以及elementPlus选中组件出现黑框问题解决！！
夏日漱石的博客
10-05 1130
elment以及elementPlus选中组件出现黑框问题解决！！
去除button自带边框
qq_43092878的博客
12-20 9153
小白 去除button的自带boder 加入css样式去除button边框 例如 .share-btn::after { border: none; } 下面的话很重要！！！ 注意 : button有个plain属性 (按钮是否镂空，背景色透明) , 这个属性不要设置为true , 要不然你自己加的去除边框会失效 . ...
Vue中Button按钮基础用法及参数属性
Tiuntel
01-30 7575
Vue中Button按钮基础用法及参数属性
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
08-27
主要介绍了微信小程序分享功能之按钮button 边框隐藏和点击隐藏,需要的朋友可以参考下
elementUI MessageBox 弹框button去除蓝边，改用el-dialog
weixin_43951592的博客
03-16 1419
如图所示，确定按钮是蓝色的，即使重写其样式，改了背景色之后，其outline的颜色还是无法改变，取消按钮一样，点击之后都会有一圈蓝边。 本人是这样解决的，直接改成用 el-dialog，然后 把红色部分的type删掉就可以了 <el-button @click=“dialogVisible = false”>取 消< /el-button> <el-button type=“primary” @click=“dialogVisible = false”>确 定 <.
去除button点击时的边框
心若向阳 无谓悲伤
11-30 4525
1、问题：button按钮的边框，通过css样式设置不显示，但点击是会出现 2、解决：配置按钮的光标事件和边框属性 3、实现代码 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <ti
elementUi 按钮点击之后取消状态
qq_29236119的博客
02-03 4322
elementUi 中的按钮，点击操作之后按钮的状态会一直存在，如果想要取消的话就手动触发一下，如下： let target = evt.target; if(target.nodeName == "SPAN"){ target = evt.target.parentNode; } target.blur(); 点击的时候去执行这些代码，需要注意的是要看看按钮的文字是不是在span标签内，如果在button里没有span标签就直接evt.target.blur();就可以了 ...
button按钮清除边框
qq_34631220的博客
06-30 2901
button按钮清除边框
vue 处理防止按钮重复点击问题
x_nweBorder01k的博客
04-11 2679
1.在button上绑定动态的disabled <el-button type="primary" size="mini" @click="testCode" :disabled="codeDisabled">发送验证码</el-button> 2.在data中定义 codeDisabled: false, 3.在点击事件里加入定时器，60000为1分钟不能重复点击 testCode() { this.codeDisabled = true
element-ui使用el-button去掉focus
wx258852的博客
11-30 6443
开发时使用el-button按钮点击之后不会恢复到原来的样式，需要出发其他地方的点击事件才会恢复，参考文章elementui中el-button点击后强制失去焦点（this.$confirm取消后按钮聚焦问题）_Kimser-CSDN博客 我的代码： HTML： <el-button type="danger" style="margin-bottom:10px" @click="deleteRowAll($event)" ...
C#利用反射技术实现去掉按钮选中时的边框效果
01-21
本文实例讲述了C#利用反射技术实现去掉按钮选中时的边框效果。分享给大家供大家参考。具体如下： public void HideFocusCues(Control control) { Type vType = typeof(Control); FieldInfo vFieldInfo = vType....
微信小程序中button去除默认的边框实例代码
11-30
微信小程序中button去除默认的边框的实现方法如下所示： button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-...
解决搜索框和搜索按钮button边框不能重合的问题
01-18
今天在用百度页面做练习的时候突然发现，尽管设置了搜索框和button的margin值和padding值各为0，他们俩的边框还是不能重合（不想用position） 无奈之下问了老师，老师说设置他俩的父元素的font-size为0就行，因为父...
scrollintoview方法滚动距离顶部距离
weixin_55932347的博客
04-26 80
方法是 DOM API 的一部分，用于将元素滚动到视图中。这个方法接收一个布尔值参数。，指示是否需要滚动到视图的顶部。
常见的css面试题（持续更新，欢迎补充）
清浅就是我的博客
04-22 478
总结面试常问的css相关面试题~通常遇见margin塌陷，是我们同时给父子元素都设置的margin， 此时元素不会像我们想的那样撑开，而是选取最大margin去显示。如何解决这个问题呢？ 给父元素设置浮动给父元素设置：overflow：hidden给元素设置为绝对定位一般来说：行内样式> id选择器 > class选择器 > 类型（标签）选择器和伪元素选择器 > 属性选择器.当上述只有一个的时候，很明显就能看出来谁的优先级高， 但是当同时存在id选择器 、 class选择器 、标签选择器 、 属
【React】CSS 局部样式
最新发布
小秀的博客
04-26 70
的时候，如果 CSS 文件名包含 module，那么说明该 CSS 是一个局部 CSS 样式文件，类似于 vue 中的 scoped。
2分钟自己写小游戏：使用js和css编写石头剪刀布小游戏、扫雷小游戏、五子棋小游戏。新手老手毕业论文都能用。
m0_68335484的博客
04-23 1171
2分钟自己写小游戏：使用js和css，快捷编写剪刀石头布游戏源代码、扫雷源代码、五子棋。新手老手毕业论文都能用。使用的都是简单的js和css代码，实现了这三款小游戏，复制就能用。一看就能懂。这里分享一下。下次继续。
css边距的接触
2401_83693610的博客
04-26 373
4个边 padding: 0px;上下 左右 padding: 0px 20px;上 左右 下 padding: 0px 20px 30px;上 右 下 左 padding: 0px 20px 30px 40px;平移这个元素位置的一半 :transform: translate(-50%,0px);左右 上下居中。
elementUI的button按钮怎么去除边框
06-08
要去除Element UI的button按钮的边框，可以使用以下CSS样式： ``` .el-button--default, .el-button--primary, .el-button--success, .el-button--warning, .el-button--danger, .el-button--info { border: none...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值