去除input在chrome中显示的外边框

最新推荐文章于 2024-12-02 08:29:46 发布
原创 最新推荐文章于 2024-12-02 08:29:46 发布 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #css3 #html5 #html #css

本文介绍了解决Chrome浏览器中输入框聚焦时出现黑色外边框的问题。通过为input元素设置outline:none;来移除默认样式，并提供替代方案如使用border或box-shadow属性以实现自定义聚焦效果。

去除input在chrome中显示的外边框

原因

在这里插入图片描述
中间部分的input框，在聚焦时候，会显示一个黑色的外边框，查找后发现原因是chrome中给input框的focus-visible增加了outline属性
在这里插入图片描述

解决方案

为input框的focus-visible设置outlone:none; 属性
如果要增加鼠标聚焦后显示边框的效果，可以设置 outline: 1px solid red; 相当于基于整个元素节点设置外边框。
因此针对设置了圆角一类的元素节点，想要设置边框，最好还是采用：
border: 1px solid #96c9f7;
或者
box-shadow: 0px 0px 0px 1px #96c9f7;
在这里插入图片描述

实现效果

在这里插入图片描述

详解移动端HTML5页面端去掉input输入框的白色背景和边框（兼容Android和ios）
12-14
本篇文章将详细讲解如何去除`input`输入框在Android和iOS设备上的默认白色背景和边框，从而实现更加美观、协调的界面效果。 首先，问题的起因在于开发者在创建一个订单查询功能时，使用了`<input type="date">`标签...
CSS常用伪类选择器详解
qq_43293207的博客
03-24 1万+
1. 用户行为伪类 1.1 :hover selector:hover 表示匹配鼠标经过的selector选择器元素。 应用场景： 鼠标经过元素时的样式变化，Tips提示，下拉列表和过渡动画等 细节优化： 如果在鼠标移动到目标元素过程中触发了附近其他元素的:hover效果导致遮盖了目标元素，可通过设置目标元素效果hover的延时出现（通过visibility控制显隐和transition配合使用） 通过:hover实现类似下拉列表这种重要功能时，需考虑用户交互环境无鼠标的情景（如触屏设备，智能电视），可通
Chrome浏览器中input:focus不生效的原因
qq_35134503的博客
03-24 911
谷歌浏览器在input上增加了 :focus-visible 属性。css 中给input 增加outline:none;
input focus改变边框颜色
weixin_45190306的博客
07-20 4828
我需要将其变成浅绿色，修改focus和focus-visible的border-color都没有用；后面发现需要设置下input的outline-stylenone;这样就可以改变边框颜色了。记录一下遇到的小问题input当focus时边框颜色是深蓝色，就像这样。...
怎么用css去掉chrome浏览器中input获得焦点时的带颜色边框呢
热门推荐
snowstorm的博客
04-23 3万+
可以设置表单控件的outline属性为none值， 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框。 css代码如下： input{outline:none}
去掉input搜索框获得焦点时的边框
学点的优快云博客
02-21 6118
开发工具与关键技术：Adobe Dreamweaver CC 与css 作者：黄灿 撰写时间：2019.2.16 用input[type=”text”]写一个搜索框，很简单 图1 这样子写这个搜索框，获得焦点是有一个自带的边框出现 图2 想要在搜索框中获得焦点时这个边框隐藏起来我们需要加上一个属性 图3 写上outline为none这个属性，在搜索框中获得焦点时这个边框就会隐藏起来 图4 ...
四种去除input默认样式的方法详解
本文标题“去除input默认样式[代码]”明确指出了文章的核心目标：通过编码手段消除浏览器为 `input` 元素自动赋予的视觉效果，从而实现完全由开发者控制的外观表现。描述部分进一步详述了四种具体的技术方法来达成这...
input输入框去掉边框
02-24
对于 `input` 元素应用如下样式能够有效去除其默认以及获得焦点时显示出来的外边框与内轮廓线[^1]。 ```css input { /* 去除默认边框 */ border: none; /* 去除选中或聚焦边框 */ outline: none; } ``` 上述...
input点击的时候边框不变色
最新发布
03-20
来去除外边框，或者设置border属性为none或特定颜色。此外，可能需要同时针对:focus和:active状态进行调整，确保在不同浏览器下都生效。还需要注意，如果用户自己设置了border，可能需要明确指定以避免冲突。 另外...
如何清除css中文本框获得焦点时 自动出现的边框
eight_eyes_fish的博客
10-31 2578
清除css中文本框获得焦点时 自动出现的边框
谷歌浏览器自动填写input框，会挡住input中背景图的问题解决方法
qq_40288956的博客
02-23 1052
谷歌浏览器对输入框输入的内容存在记忆，当用浏览器记忆的内容填写input框时，就会把input框的背景图片遮挡住，并且修改字体的颜色，以下是对此问题的解决办法
chrome浏览器自动填充的样式问题 input选择历史记录选项时，出现了自带背景色等样式，如何修改呢？
xingchen678的博客
03-16 2638
网上查询得三种方案，一种是把input自动输入关闭autocomplete="off"，第二种是设置box-shadow阴影覆盖默认样式， input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color:#333; } 但是这...
Chrome 下input的默认样式
dgedge0769的博客
11-08 480
一.去除默认边框以及padding border: none;padding:0 二.去除聚焦蓝色边框 outline: none; 三.form表单自动填充变色 1.给input设置内置阴影，至少要比你的input本身大。不过，box-shadow是很慢的，适当大小。而且，如果你的input是用图片做背景的话，是没有办法做这么干的。设置tr...
你了解 CSS 的全部 4 种焦点样式吗？
粉丝们务必加入微信粉丝群
12-02 1226
在网站开发中，确保用户能够轻松地浏览和操作页面是非常重要的。CSS 焦点样式是一种有效的方式，可以直观地展示页面中哪个元素被选中了。本文介绍了 4 种处理 CSS 焦点样式的方式，每种方式都附有简单的示例，帮助你快速掌握这些技巧。什么是 CSS 焦点样式？CSS 焦点样式是一种视觉效果，用于突出显示页面中当前被选中的元素。它对使用键盘、屏幕阅读器或其他辅助工具导航的网站用户尤为重要。良好的焦点样式...
chrome html消除边框
奇妙的博客
07-29 3444
      自学习html以来用的都是谷歌浏览器，最近发现在默认情况下，谷歌浏览器是为body留有边框的，不仔细看真不容易看出来。 在检查元素时可以清楚地看到这个边框。          一般来说这对页面没有太大影响，但是有时我们需要把这个边框去掉，让body中的元素紧挨着浏览器的边框，这时，就需要修改body元素的margin和padding属性，将两个属性的值都置为0。 &lt;!...
强大的CSS：focus-visible伪类真的太6了！
clhq71932的博客
05-22 1322
一、快速了解CSS :focus-visible伪类 :focus-visible 伪类是非常年轻的一个伪类，目前仅Chrome浏览器标准支持，但足够了。如果你是一个深入用户体验的开发者，这个伪类会非常有...
探索并体验`:focus-visible`的魔力——`focus-visible`库推荐
gitblog_00004的博客
05-13 548
`:focus-visible` CSS伪类是一种旨在改善Web可访问性的创新技术，使得键盘导航时元素的聚焦状态更加明显。而今天，我们要向您推介一个基于该伪类的开源项目——`focus-visible`。这个项目不仅仅是一个简单的polyfill，它是一整套解决方案，可以帮助您的网站或应用在不支持`:focus-visible`的浏览器中实现同样的功能。 ## 项目介绍 `focus-visi...
Element plus下拉框el-dropdown有黑框框怎么取消？
ZYXKN的博客
02-17 6345
Element plus下拉框有黑框框怎么取消？
前端学习记录(大一) - 第三周
qq_33680352的博客
12-05 225
前端学习记录(大一) - 第三周 本周学习进度 本周我对以前学习的html和css知识进行了综合练习，进一步学习html和css有关知识并简单了解了svg矢量图，主要实现了简单的双栏和三栏布局 成果展示 双栏布局以及侧边栏伪等高 效果图 代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wi
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值