浏览器输入框自动填充默认样式移除

最新推荐文章于 2024-06-26 11:30:59 发布
最新推荐文章于 2024-06-26 11:30:59 发布
阅读量866 收藏 7
点赞数 6
分类专栏： 用户体验/自适应 探索总结 排坑记录 文章标签： 浏览器 自动填充
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_37177115/article/details/134679679
版权
文章讲述了在uniapp开发中遇到的浏览器自动填充默认样式问题，通过调整CSS代码(-webkit-text-fill-color和-webkit-box-shadow)来改变输入框的填充颜色，提供了解决方案。

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

文章目录

浏览器输入框自动填充默认样式移除

问题现象以及探索过程

（在 uniapp 语法下）本文的写法在

  • Edge 119.0.2151.58 (正式版本) (64 位) 下有效
  • 其他浏览器我电脑上没装，就不去测试了

请添加图片描述

自动填充，试了网上的很多参考文章都无效

有时间的朋友可以试试研究一下这些文章，大概率能解决问题：（感觉稍微有点复杂，我就没有去尝试）

最低0.47元/天 解锁文章
禁用 Vue 自动填充功能
YOLO_CODE的博客
09-22 796
在 Vue.js 中，有时我们可能希望禁用浏览器的自动填充功能，特别是在涉及敏感信息的表单中。本文将介绍如何在 Vue 应用中禁用自动填充功能，并提供相应的源代码示例。属性的方式，来禁用 Vue 应用中的自动填充功能。除了样式设置外，我们还可以使用 HTML 属性来禁用自动填充。首先，我们可以通过添加自定义样式来阻止浏览器自动填充表单字段。将上述样式添加到你的 CSS 文件中，或者在 Vue 组件的。如果你正在使用 Vue 组件，可以通过在组件的模板中设置。在上述示例中，通过在表单元素的模板中设置。
取消element-ui中账号和密码登录功能浏览器默认的填充色，element-ui登录账号密码输入框禁用浏览器默认填充色问题
weixin_41346436的博客
10-24 680
【代码】取消element-ui中账号和密码登录功能浏览器默认的填充色，element-ui登录账号密码输入框禁用浏览器默认填充色问题。
input使用自动输入autofill的时候，修改背景颜色
weikehang的博客
10-23 1299
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; //字体颜色 -webkit-box-shadow: 0 0 0px 1000px transparent inset !imp...
去除Chrome浏览器表单自动填充默认样式
Bird15926的博客
03-07 642
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-transition-delay: 99999s; -webkit-tr...
去除浏览器记住密码时自动填充的input框样式
小肉包的博客
06-08 856
去除浏览器记住密码时自动填充的input框样式。
禁止浏览器对input的自动填充和填充提示(适用于谷歌、火狐、Edge(原IE浏览器)等常见浏览器)
qq_51667621的博客
06-26 7625
解决input在不同浏览器中自动填充以及填充提示的问题，以谷歌、火狐、Edge(原IE)等浏览器为例，禁止出现自动填充，提高用户隐私和网站的安全性。
清除浏览器 input自动填充样式
chuanxie4368的博客
07-10 541
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; -webkit-text-fill-color: #333; } ...
CSS--input默认样式（包括自动填充，颜色，边框等属性）的清除
weixin_52283867的博客
06-16 3244
前言 众所周知，我们在写网页的时候第一步总是要清空元素的默认样式（这些都是浏览器自己渲染的），一般就是直接引用一个重置样式表 不过元素属性这么多你也不可能全部都清除掉，接下来讲的就是input默认样式的清除 例子 清除边框,阴影 正确情况下input标签没有获取焦点时是这个样子： 获取焦点后是这样子： 对应清除代码如下： input{ border: none; box-shadow:none; outline: none; } 这样点击的时候就没有边框等的出现！！ 清除自动填充 我用的浏览器
CSS3默认样式
04-16
### CSS3默认样式的解析与应用 #### 一、引言 在网页设计与开发过程中，CSS（层叠样式表）扮演着至关重要的角色。它不仅能够帮助开发者美化页面布局，还能实现各种复杂的视觉效果。CSS3作为CSS的最新版本之一，引入...
Java Playwright浏览器自动化工具
一碗清深的博客
02-22 749
Playwright是一个用于自动化浏览器操作的开源工具。它由Microsoft开发，可以用于测试、爬虫、数据抓取等各种场景。
Chrome表单文本框自动填充黄色背景色样式
GaojbSunny的博客
08-04 1027
开发后台管理系统或 网站时，使用谷歌的Chrome浏览器访问网页中表单，文本框背景色自动填充为黄色。这个问题在网络上其实早已经是老生常谈了，今天正巧我要处理这个问 题，把之前查阅的一些资料和自己解决这个问题的方法纪录在此，一是为大家遇到此问题时提供一份资料，二是作为自己的笔记。过多的话就不多说了，下面进入正 题。         一、首先介绍一下我遇到这个问题时文本框的样式情况： 
chrome浏览器自动填充样式修改
qq_39373940的博客
02-20 913
input:-webkit-autofill { text-fill-color: #0080c5; -webkit-text-fill-color: #0080c5; -webkit-box-shadow: 0 0 0px 1000px #004c81 inset !important; } 或者改为autocomplete=‘off’，关闭自动填充，用户体验-1 ...
修改浏览器自动填充账号密码输入框样式
qq_43227422的博客
02-20 493
【代码】修改浏览器自动填充账号密码输入框样式。
取消input 输入框自动填充颜色
weixin_38551805的博客
07-28 440
document的属性和方法
CSS :autofill 如何覆盖浏览器自动填充表单的样式
broken_promise的博客
04-18 1130
autofill伪类匹配浏览器自动填充值的input元素. 如果用户继续编辑这个元素内容就会停止匹配.
关于浏览器自动填充后，输入框背景被浏览器样式覆盖的问题
weixin_53955862的博客
03-02 868
今天分享一下怎么解决，在用vue2.0编写前端页面，遇到类似chrome/edge带有密码自动填充的浏览器，自动填充密码后会改变input输入框背景颜色的问题（当然可能也适用于其他前端代码的，输入框自动填充css样式修改）。这意味着，如果你没有为某个HTML元素指定样式，浏览器会使用它自己的默认样式来渲染该元素。
CSS 修改浏览器自动填充密码默认样式 input
前端技术
06-06 1865
padding-left：字体左侧的间距与原始字体间距保持一致，视实际情况而定；-webkit-box-shadow：使用盒子阴影遮挡input背景色；width：长度与原始 input 保持一致，视实际情况而定；border-radius：一定要设为 0，默认是有弧度的；input:-webkit-autofill：自动填充。改为浏览器默认样式。原始效果，未使用自动填充的。使用自动填充密码，整个。
css取消浏览器input自动填充样式
你，若盛开的专栏
11-18 1061
css取消浏览器input自动填充样式
去除谷歌浏览器中input自动填充背景
希望我快乐
07-18 457
去除谷歌浏览器中input自动填充背景
vue3项目解决Safari浏览器密码填充后可见的问题
最新发布
12-17
Vue3项目中，如果遇到Safari浏览器的密码自动填充导致输入框内容可视的情况，可以采取以下几种解决方案： 1. 遮盖input元素：在`mounted()`生命周期钩子中，给需要处理的输入框添加一个`::placeholder`伪元素，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

RealizeInnerSelf丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值