去除input自动填充时的背景色

最新推荐文章于 2024-08-15 15:02:31 发布
最新推荐文章于 2024-08-15 15:02:31 发布
阅读量6k 收藏 7
点赞数 3
分类专栏： 记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xxitcef/article/details/118146245
版权
在登录页面中，input自动填充的背景色可能影响设计美观。可以通过两种方式解决：1. 使用`autocomplete="off"`属性关闭自动填充，但会牺牲用户体验；2. 使用CSS样式覆盖默认背景色。
摘要由CSDN通过智能技术生成

我想应该做过登录的页面的同学都遇到过这样的问题,input的自动填充功能会带有背景色，这样会影响美观，如下图
上面的admin是自动填充的，下面的密码是自己输入的
要想去掉这个背景色有两种方法：
1.给input设置属性autocomplete=“off”，意为关闭自动填充，不记录之前输入过的值。完全可以解决背景色的问题，但是没有自动填充功能体验相对来说不是很友好
2.通过css样式：

<style lang="less">
  input:-webkit-autofill {
   
    box-shadow:0 0 0
最低0.47元/天 解锁文章
会飞的虫儿飞
关注
专栏目录
CSS--input默认样式（包括自动填充，颜色，边框等属性）的清除
weixin_52283867的博客
06-16 3111
前言 众所周知，我们在写网页的时候第一步总是要清空元素的默认样式（这些都是浏览器自己渲染的），一般就是直接引用一个重置样式表 不过元素属性这么多你也不可能全部都清除掉，接下来讲的就是input默认样式的清除 例子 清除边框,阴影 正确情况下input标签没有获取焦点时是这个样子： 获取焦点后是这样子： 对应清除代码如下： input{ border: none; box-shadow:none; outline: none; } 这样点击的时候就没有边框等的出现！！ 清除自动填充 我用的浏览器
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
09-03
很多朋友都遇到这个问题：当使用chrome浏览器表单自动填充时都会自动添加默认的样式，该如何去除默认样式呢？看看小编是怎么去除的，需要的朋友一起学习吧
前端input操作，修改光标颜色，去除背景色
qq_40128591的博客
07-24 7235
修改光标颜色方法： input输入框的光标颜色修改有两种： 第一种设置光标颜色的同时修改光标颜色，使用：color:green; 第二种：只修改光标颜色，使用：create-color:green; 更改input输入框背景色： 从事前端工作半年以上的同志都知道，我们的input输入框是有默认背景色和边框的。但有时候我们有需求放自己的背景色或者没有背景色。 更改颜色很：这比较简单，就是平时我们用的background-color:red;就可以了。 去掉背景色：首先我们要明白的是背景色是标签自带
去除Chrome中input自动填充背景颜色
最新发布
08-15 186
input输入框自动填充后默认样式修改
input输入框自动填充后消除背景色
08-15 1605
【代码】input输入框自动填充后消除背景色。
如何去除input框在复制内容时自动填充的背景颜色
tianxianghuiwei的博客
05-29 441
今天在项目开放时遇到了一个问题在输入复制内容时会有一个自带的背景颜色无法去除；
清除input自动填充背景色
cdd9527的博客
12-20 2086
清除input自动填充背景色
消除input框自动填充背景色
Rachel的博客
08-18 1654
有时form表单不是纯白色，浏览器自动填充后会有背景色，很影响美观，像这样： 利用伪类来消除白色的背景色： input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px transparent inset; transition: background-color 5000s ease-in-out 0s; } 效果如下： 自动填充的字体颜色默认是黑色，如若改变自动填充的字体颜色，可用如下代码： -webkit-text-fill-co
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
09-25
然而，对于自动填充的背景颜色问题，目前缺乏直接的CSS解决方案，可能需要借助JavaScript或其他技术手段进行处理。在实际开发中，我们需要考虑不同浏览器的兼容性和用户友好性，以提供最佳的用户体验。
去掉chorme浏览器自动补全时input框的背景样式
haoyanyu_的博客
11-22 931
input开启自动补全后，选择内容后input框背景颜色变成了淡蓝色，手动填写的input背景不会变化，如下图：
一个输入框背景色改不了？去除浏览器自动填充的背景颜色
lazy_tomato的博客
03-22 2111
* 2.解决方案二，添加特殊的样式，覆盖掉原本浏览器默认的样式 */表单提交过一次，再次输入的自动提示，然后选择后，会出现的样式吗？其实，就一个html代码，加了一个form表单，没事好说的。不太清楚这个单词的含义，一般样式的右上角，都会指向我们的。元素背景色为白色，发现居然不生效，颜色并没有改变。第二部，我错愕了一下，不至于吧，随即怀疑可能有使用。第一步，上来我没想太多，直接在控制台，修改。看到这里我才，恍然大悟啊，这不就是浏览器的。，将样式冲突了，开始检查。元素的属性时发现，在。
去掉input记录密码时的背景颜色
weixin_41243385的博客
09-24 601
去掉input记录密码时的背景颜色 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ffffff !important; box-shadow: 0 0 0px 1000px transparent inset !important;...
去掉input自动填充的黄色背景
wang704987562的博客
08-11 1556
添加样式： &lt;style type="text/css"&gt; input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } &lt;/style&gt;
input使用自动输入autofill的时候，修改背景颜色
weikehang的博客
10-23 1246
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...
谷歌去掉input黄色背景，并设置透明背景
sinat_39648402的博客
07-05 3710
//去掉黄色背景色input:-webkit-autofill {    transition:background-color 5000s ease-in-out 0s;}//为input设置透明色input{    background-color:rgba(255,255,255,0.6);}
Google浏览器记住密码之后，自动填充后input的背景色和color默认样式去除
扬帆前行
05-06 4015
google浏览器记住密码之后，账号密码框自动填充到input当中，输入框的背景色为白色，color为黑色，目标是去除这些自动填充之后的默认样式。 在reset.css当中写入填充后的样式 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-col...
屏蔽、去掉、修改谷歌浏览器input输入框背景透明色input:-internal-autofill-previewed和input:-internal-autofill-selected
aaa123aaasqw的博客
04-15 459
【代码】屏蔽、去掉、修改谷歌浏览器input输入框背景透明色input:-internal-autofill-previewed和input:-internal-autofill-selected。
antdform表单去掉自动填充
06-28
在Ant Design Form中，如果你想去除表单字段的自动填充功能（比如浏览器默认的数字或邮箱输入时的自动完成），可以通过CSS来控制。以下是一些可能的方法： 1. **禁用浏览器自动填充**： 对于input元素，你可以设置`autocomplete`属性为`off`，告诉浏览器不使用自动填充： ```html <Input type="email" name="email" autocomplete="off" /> ``` 2. **自定义样式覆盖**： 如果浏览器仍然自动填充，你可以添加一个类名并用CSS覆盖其样式，隐藏或清除默认的边框、背景等： ```css .ant-input::placeholder { color: transparent; /* 或者设置成和背景色一样的颜色 */ } .ant-input:-webkit-autofill { background-color: transparent !important; transition: background-color 0s ease-in-out 0s; } ``` 3. **使用`<NoAutocomplete>`组件**： Ant Design提供了一个NoAutocomplete组件，可以放在表单字段前，阻止浏览器的自动填充： ```jsx import { NoAutocomplete } from 'antd'; <Form.Item> <NoAutocomplete> <Input type="email" placeholder="邮箱" /> </NoAutocomplete> </Form.Item> ``` 记得在实际项目中，根据浏览器兼容性和用户体验来选择合适的方法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值