关于如何去除input标签获得焦点时出现的蓝色框

最新推荐文章于 2024-01-19 09:37:54 发布
原创 最新推荐文章于 2024-01-19 09:37:54 发布 · 622 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #css

本文介绍了一种简单的方法来移除HTML输入框点击时出现的蓝色轮廓，只需在CSS中添加一行代码：outline:none;此外，还提供了如何使用border属性为输入框设置自定义样式的技巧。

问题实况如下：

出现了蓝色框
上图中的搜索框出现了蓝色框。

去除方法：

只需要简单的一步，在CSS里添加属性：outline：none；即可。
如图：
解决蓝框的CSS样式

PS:

如果想为input的框设置另外的样式，使用border属性即可。

snacy
关注
CSS去除元素的蓝色边框
2301_79326588的博客
10-04 721
当我们在网页中创建链接或者在输入表单中进行输入时，浏览器会默认为相关的元素添加一个蓝色边框，这是为了突出显示当前活动元素。通过使用CSS的outline属性，我们可以轻松地去除元素的默认蓝色边框。然而，请谨慎使用该方法，确保在去除蓝色边框的同时提供其他视觉指示，以保证良好的用户体验。需要注意的是，去除蓝色边框可能会导致用户体验上的问题，因为蓝色边框有助于用户识别当前活动的元素。如果你决定去除蓝色边框，建议在其他方式上提供足够的视觉反馈，以确保用户可以清楚地识别到焦点所在的元素。
jquery实现当输入框获得焦点时自动渐变颜色
05-15
标题 "jquery实现当输入框获得焦点时自动渐变颜色" 涉及的是在Web开发中使用jQuery库来实现一种动态用户体验，即当用户点击或选中一个输入框（text box）时，该输入框的边框颜色会逐渐变化，以增加交互性和视觉吸引...
关于去除easy ui 的input textarea 等输入框点击有蓝色框框
qq_33232235的博客
07-20 2059
easyui 的编辑框点击都有的默认的蓝色框，去除的话只需要将其style的outline:none;
去除input标签focus时蓝色边框
九日的博客
04-22 8521
去除标签focus时蓝色边框 问题: 当使用input标签时，它会有一个默认样式，即当其获取到焦点时，会有一个蓝色边框效果。如下图： 未获取焦点时： 获取到焦点时： 我们在控制台查看input:focus如下图。 发现并没有相关的样式。 事实上这是input的outline属性带来的问题。当我们加上 input { outline:none; } 就能解决这个问题。同样有这个问题...
uni-app_uView1.0 输入框里获得焦点时边框颜色改变，失去焦点后边框恢复原颜色
彬sir哥的博客
10-27 3490
2、怎么快速改代码，不用去百度找(会浪费时间)，就是直接在。我不说多了，自己检查就即可。
uni-ui修改全局输入框里获得焦点时边框颜色改变，失去焦点后边框恢复原颜色
Whit3ZzT的博客
04-18 2432
我这里想要修改uni-ui中输入框聚焦后的颜色，一开始是使用css去实现，发现不行，达不到我想要的效果，而且还复杂显得太笨，在网上寻找方法，只找到了uni-app_uView的修改方法，并没有uni-ui的修改方法，于是便参照着自己找到了，这里分享一下。
删除 el-input 的focus事件
信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀
11-15 1240
>>>.el-input{ width: 300px; height: 40px; background: #FFFFFF; border-radius: 4px; border: 1px solid #C5C5C5; margin-right: 10px } >>>.el-input__inner{ height: 4...
textarea 聚焦后边框_实现"输入框"获得焦点时外边框变蓝
weixin_42464967的博客
12-24 3211
背景之前做了一个网页，网页中的所有输入框都被设计为“获得鼠标焦点时外边框不变蓝”。突然某一天，产品觉得这样用户体验不好，不能很明显地告诉用户当前鼠标停在哪里，于是要求改为“当输入框获得鼠标焦点时，外边框自动变蓝；失去焦点时外边框恢复原样”。浏览器自动会给输入框input、textarea的outline 属性设置一个默认值，效果就是当输入框获得鼠标焦点时外边框会自动带上颜色，失去焦点时外边框颜色消...
IE下target获得焦点时产生虚线问题的解决方法
12-09
标题中的“IE下target获得焦点时产生虚线问题的解决方法”指的是在IE浏览器中，当某个元素（target）通过点击或者其他方式获取到焦点时，会自动出现一个蓝色的虚线边框，这可能与设计师的预期视觉效果不符。...
input蓝色边框如何消除
最新发布
02-14
对于`<input>`和`<button>`标签，默认情况下浏览器会在这些元素获取焦点时显示一个蓝色边框。为了移除这个默认行为，可以应用特定的CSS属性。 针对输入框（`<input>`），可以通过设置`border`为0来取消未选中状态下...
关于input中的获取焦点出现蓝色边框和placehold的样式
8月13日
11-04 2060
在登录界面时候，鼠标获取焦点事件时，input出现一个蓝色的边框，在控制面板上没有找到相关样式，解决办法：outline：none，表示一个元素的轮廓性，为了突出元素，那border中设置为什么不起作用呢，border是input的一个默认属性，当设置border为0 时，border还是起作用，只有当border的值为none是才能将边框设置为无，或者说是隐藏 在input中还有一个就是plac...
input框点击出现蓝色背景，uniapp项目，这是ios系统手机独有的问题，安卓和window系统没有。要在点击的标签里面加上 -webkit-tap-highlight-color
Frank_colo的博客
01-19 873
uniapp项目，要实现下拉框可搜索的功能，uniapp官方组件和uview都没有这个功能的组件。input框点击出现蓝色背景，uniapp项目，这是ios系统手机独有的问题，安卓和window系统没有。然后在pages.json里的自动扫描配置里添加这个插件，让uniapp自己扫描，这样就可以全局用了。在这个插件文件里，在最顶部写/* eslint-disable */有时下载的插件文件会报错，这和我们的eslint检查有关，要想不报错。然后给这个插件要进行类型声明，和自己写全局组件的类型声明一样。
去除input输入框获得焦点以后的蓝色边框
沧笙踏歌的博客
05-27 3249
加css outline:none;
去掉input聚焦时的边框
weixin_43915401的博客
05-30 3076
<html> <body> <input placeholder="请输入"/> </body> </html> border:none效果 <html> <head> <style> input{ border:none; } </style>
antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边
zihang_cheng的博客
11-05 1945
antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边
使el-input失焦
m0_57958926的博客
05-25 732
//html部分 <el-input v-model="ruleForm.pwd" @keyup.enter="login($event)"></el-input> //js部分 login:(event)=>{ event.target.blur() }, 使用$event事件，触发失焦
更改默认安卓按钮、文本框等的深蓝色背景
xwbk12的博客
04-24 383
更改默认安卓按钮、文本框等的深蓝色背景（https://blog.youkuaiyun.com/try17875864815/article/details/110409078）
去掉input搜索框获得焦点时的边框
学点的优快云博客
02-21 6122
开发工具与关键技术：Adobe Dreamweaver CC 与css 作者：黄灿 撰写时间：2019.2.16 用input[type=”text”]写一个搜索框，很简单 图1 这样子写这个搜索框，获得焦点是有一个自带的边框出现 图2 想要在搜索框中获得焦点时这个边框隐藏起来我们需要加上一个属性 图3 写上outline为none这个属性，在搜索框中获得焦点时这个边框就会隐藏起来 图4 ...
如何解决button，a，input标签自带蓝色边框
aakf16849的博客
11-16 555
通常我们会设置该标签outline:0;但是我在使用iview自带的button组件的时候，设置无效，经过测试只要设置 :focus{ outline:0; } 即可，方便有效 转载于:https://www.cnblogs.com/YMoonwind/p/9970171.html...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值