a、button、input点击出现蓝色边框，如何去掉

最新推荐文章于 2025-08-01 11:48:32 发布
最新推荐文章于 2025-08-01 11:48:32 发布
阅读量4.7w 收藏 8
点赞数 15
CC 4.0 BY-SA版权
分类专栏： CSS 文章标签： ainputbutton点击边框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lml_little/article/details/51162047
本文介绍如何通过CSS和JS代码消除网页中按钮、输入框等元素的点击高亮效果及图片边框，包括常见伪类处理方法。

a,button,input{ 

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);    

   -webkit-user-modify: read-write-plaintext-only;

}

可根据实际情况添加

outline: none;

或

box-shadow: none;

有时候<img />图片放在a标签里也会出现边框，可设置图片的边框为0.

除此之外还要注意其伪类的设置。


js方法：

onclick="this.blur()"

CSS去除元素的蓝色边框
2301_79326588的博客
10-04 661
当我们在网页中创建链接或者在输入表单中进行输入时，浏览器会默认为相关的元素添加一个蓝色边框，这是为了突出显示当前活动元素。通过使用CSS的outline属性，我们可以轻松地去除元素的默认蓝色边框。然而，请谨慎使用该方法，确保在去除蓝色边框的同时提供其他视觉指示，以保证良好的用户体验。需要注意的是，去除蓝色边框可能会导致用户体验上的问题，因为蓝色边框有助于用户识别当前活动的元素。如果你决定去除蓝色边框，建议在其他方式上提供足够的视觉反馈，以确保用户可以清楚地识别到焦点所在的元素。
WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用
CSDN博客专家，系统架构师，有合作、疑惑请私信博主。
01-23 2809
WPF基础 | WPF 常用控件实战：Button、TextBox 等的基础应用 ， 在当今的软件开发领域，创建直观、易用且美观的用户界面至关重要。WPF 凭借其强大的功能和丰富的可视化设计工具，成为了开发 Windows 桌面应用程序的首选框架之一。其中，Button（按钮）和 TextBox（文本框）等控件是构建用户交互界面的基础元素，熟练掌握它们的应用是开发高效、优质 WPF 应用程序的关键。
手机端页面去除a标签点击时的蓝色边框
第7维度 - 日常笔记
05-22 4556
手机端页面去除a标签点击时的蓝色边框 a {border: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;outline: none;}
a,input，button点击的时候出现蓝色的边框
weixin_34402090的博客
11-22 175
1 a,button,input{ 2 -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 3 -webkit-user-modify: read-write-plaintext-only; 4 outline: none; 5 }  
按钮选中时有蓝色框，如何实现？
小新的博客
08-01 861
如果你希望更灵活地管理边框样式，可以单独创建一个蓝色边框的Drawable。例如，创建-- 透明背景 --> < stroke android: width = " 2dp " android: color = " #0000FF " /> <!-- 蓝色边框 --> < corners android: radius = " 4dp " /> <!-- 圆角半径 --> </ shape >
解决手机端页面的鼠标点击出现蓝色背景
wuyou1336的博客
12-28 3748
在手机网页中点击某一个链接或是文本框后通常会在上面出现一个蓝色的透明的框（不同手机颜色有差别）。 在网页中可以使用一个css修改这个框的颜色。 * { -webkit-tap-highlight-color:transparent; }
关于a标签在点击时会有蓝色的背景
weixin_51418678的博客
01-04 2308
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>a标签
redis分布式锁的实现（setNx命令和Lua脚本）
热门推荐
lzf的博客
05-27 8万+
前言 本篇文章主要介绍基于Redis的分布式锁实现到底是怎么一回事，其中参考了许多大佬写的文章，算是对分布式锁做一个总结 分布式锁概览 在多线程的环境下，为了保证一个代码块在同一时间只能由一个线程访问，Java中我们一般可以使用synchronized语法和ReetrantLock去保证，这实际上是本地锁的方式。但是现在公司都是流行分布式架构，在分布式环境下，如何保证不同节点的线程同步执行呢？ 实际上，对于分布式场景，我们可以使用分布式锁，它是控制分布式系统之间互斥访问共享资源的一种方式。 比如说
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
11-27
这种方法不仅适用于input元素，也可以应用于其他可点击的元素，如a标签、button等，只需将CSS选择器替换为相应的元素即可。在实际项目中，这样的微调对于提升用户体验是非常重要的，因为它可以帮助创建更一致且无...
button标签点击时显示的边框如何去除
最新发布
09-19
对于input标签，设置`border: 0`去除未选中状态边框，`outline: none`去掉外边的蓝色边框，同时可设置透明背景。示例代码如下： ```html input{ border: 0; outline: none; background-color: rgba(0, 0, 0, ...
input蓝色边框如何消除
02-14
同样地，按钮（`<button>`）点击时产生的蓝色边框问题也能通过相同的`outline:none;`声明解决: ```css button { outline: none; } ``` 当涉及到多行文本输入区域即`<textarea>`时，除了上述提到的消除蓝色边框...
input、button去除点击按钮时出现蓝色边框
刺心的博客
05-14 1378
点击按钮时出现轮廓（input输入框也有），如下图： 解决方法：在css中加入outline: none input{ outline: none } button{ outline: none } Ps：注：outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。 ...
（nuxt.js）点击指定地方使指定输入框自动获取焦点
The_Fuir_ye的博客
05-17 472
（nuxt.js）点击指定地方使指定输入框自动获取焦点 1.代码图片 2.示例代码 <!-- 刻字效果 start --> <div class="EngravingModule" v-if="item.lettering"> <div class="seal"> <div class="buycort_Lettering"> <!-- ref="container" --> <div class="inputBox"
Elementui蓝色阴影边框相关问题的解决方案
qq_40591925的博客
05-19 1603
Tabs标签页出现蓝色阴影边框解决方案 .el-tabs__item:focus.is-active.is-focus:not(:active) { -webkit-box-shadow: none !important; box-shadow: none !important; outline: none; } el-button-radio出现蓝色阴影边框解决方案 .el-radio-button:focus:not(.is-focus):not(:active):not(.is-di
button按钮样式_Swift 笔记#2 - SwiftUI 基础控件 Button 必知必会
weixin_39695374的博客
11-28 598
本期学习 SwiftUI 基础控件 Button 的使用，内容基本涵盖了 Button 高频的使用场景；通过本节课你将收获：常规创建 button 的 两种 方式给按钮设置 图标、设置 圆角；更改 前景色 、背景色给按钮设置 渐变背景色、阴影 效果复用按钮样式，给按钮添加 动效简单 交互 实现视频版长度 14 分钟（内涵 5 小节），点击前往 观看视频Swift 笔记#2 - SwiftUI 基础...
各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记
前端水獭的博客
08-29 6690
写在前面 最近忙着实习的事，前往广州，租房，置办东西等等。用碎片化的时间看了一些博客，也看到不少我认为很不错的通过纯css来打造的按钮样式。记录下来以后开发的时候或许能用上。 亮起来按钮 <div id="neon-btn"> <button class="btn one">Hover me</button> <button class="btn two">Hover me</button> <button cl
关于手机网站(webApp)点击链接出现蓝色焦点框的问题
二手农民的学习博客
06-21 1225
随着智能的飞速的普及，手机网站也是越来越多。 在使用在浏览手机网站时候，点击链接时候出现一个蓝色的框，非常多影响视角效果，俺就是饱受折磨，又说服不了设计师，几经周折。查阅一些资料，总算把原因给找到了。现在分享出来与大家共享 出现以上问题的不再PC端点击链接的虚线框在作祟了，而一个比较偏门的CSS3属性 -webkit-tap-highlight-color 在捣蛋作祟。 -web
android焦点 蓝色背景色,Android中View(视图)绘制不同状态背景图片
weixin_34094559的博客
05-26 573
今天继续给大家分享下View的相关知识，重点有一下两点：1、View的几种不同状态属性2、如何根据不同状态去切换我们的背景图片。开篇介绍：android背景选择器selector用法汇总对Android开发有经验的同学，对节点的使用一定很熟悉，该节点的作用就是定义一组状态资源图片，使其能够在不同的状态下更换某个View的背景图片。例如，如下的hello_selection.xml文件定义：更多关...
焦点框 android tv,Android TV listview及焦点处理
weixin_30177835的博客
05-27 341
Android TV listview及焦点处理Android TV上的listview ，因为没有touch事件，只能通过按键处理，因此，用到listview时需要特殊处理:1.复杂的view需要获取焦点,需要设置：setItemsCanFocus(true)同时需要设置下能获取焦点view的属性：android:focusable="true这样子级view就可以获取获取焦点。2.view中需...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值