ant中input如果是password类型，无法修改input背景颜色

已于 2023-04-24 11:37:13 修改
阅读量409 收藏
点赞数
文章标签： css html 前端
于 2023-04-24 11:17:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42496938/article/details/130338789
版权

前言：ant中input如果是存在password类型，无法修改input背景颜色，一直都是#e8f0fe这个颜色，太坑了
研究了好久是internal-autofill-selected影响了背景颜色
加上

/deep/ .ant-input:-internal-autofill-selected {
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: #FFF !important;
}
/deep/ .ant-input:-internal-autofill-selected {
  transition: background-color 5000s ease-in-out 0s !important;
  -webkit-text-fill-color: #FFF !important;
}

就可以修改input的背景颜色了

jojo是只猫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
input之怎么清除默认值
01-19
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]这样子好像还是有些问题的,当我输入了之后,移开鼠标是不会还原成原来的默认值,可如果我要修改我的输入的话,就不行了.鼠标点上去,input又被清空了 [Ctrl+A 全选 注:...
build.xml是ant中的配置文件
最新发布
11-09
build.xml是ant中的配置文件
关于input type设置password出现黄色背景和默认内容
yakelande的博客
03-15 2876
只要设置了type为password就会出现黄色的背景和默认的内容。点击password框会出现使用以下项的密码,有没有觉得很丑，这是谷歌浏览器默认的行为，input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { box-shadow:0 0 0 60px white inset;...
Antd^4.1.3 版本 Tooltip提示修改背景色 color属性失效
书包的博客
05-19 1222
背景：用官方提供的color={}修改，ts报错color类型无法分配，我自行在ts里加上以后，该属性也无法生效。 后找到解决办法： 设置 trigger=“click”，tooltip会在点击的时候才生效。点击出来之后可以用浏览器的箭头捕获寻找样式。 //对话框背景色 .ant-tooltip-inner{ background: #D8D8D8 ; } //小箭头的颜色 .ant-tooltip-arrow::before{ background-color: #D8D8D8; } ...
处理浏览器记住密码后input框的背景色为淡黄色的问题
qq_2411868438的博客
01-06 730
找到对应代码块，附加以下css样式： input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important; background-color:transparent;
改变input，textarea字体颜色
那一刻的博客
11-05 865
效果图 input { text-shadow: 0px 0px 0px #000; -webkit-text-fill-color: transparent; } input::-webkit-input-placeholder{ color:#ccc; text-shadow: none; -webkit-text-fill-color: initial; }
input修改自动填充背景色
luffy的博客
09-03 1166
填充前的图 填充后的图 解决方法 通过控制台查找原因，发现一些原因，修改后只修改了部分样式，通过度娘成功实现 :deep(.ant-input:-internal-autofill-previewed) { -webkit-text-fill-color: #ffffff !important; transition: background-color 5000s ease-in-out 0s !important; } :deep(.ant-input:-internal-autofill-
解决浏览器输入框在记住密码后改变颜色问题
YM的博客
12-27 1319
谷歌浏览器在记住密码之后然后输入框的颜色会改变 在main.js引入的css文件中写入 /*解决浏览器输入框在记住密码后改变颜色问题*/ input:-webkit-autofill { /* 自动填充文字颜色 */ -webkit-text-fill-color: #ffe1b9 !important; transition: background-color 5000s ease-in-out 0s; } 然后的效果 ...
在react项目中使用antd的form组件,动态设置input框的值
01-18
点击保存之后，对表单进行了验证，导致之后请求的数据无法在更新到input框中，也就是说即使在state中有值，也不会更新initialValue值，就导致搜索后的值不能正确填入input中，表单也就提交不了。 解决办法： 不使用...
vue 限制input只能输入正数的操作
11-19
在某些项目中 input 框只能输入数字，可以用以下办法： 先在标签上绑定上 @input 事件来监听标签的值变化，通过正则来改变输入的值。 <input class="keep_input" v-number-only style="width:35px" v-model...
在Eclipse中集成Ant编程之配置篇
02-04
一、修改AntClasspath在使用一个可选的或定制的任务时，你可能需要把其它库添加到classpath中。为此，你可以通过以全局方式或使用一个单独工程的启动配置来修改Antclasspath。为了给一个单独的Eclipse工程设置...
《已解决》el-input自动填充时输入内容存在阴影
weixin_45928161的博客
06-04 1255
解决el-input自动填充时出现的样式效果
修改input的自动填充的样式
qq_49074952的博客
07-29 863
遇到的问题input自动填充的样式会出现以下情况。
一个输入框背景色改不了？去除浏览器自动填充的背景颜色
lazy_tomato的博客
03-22 1709
* 2.解决方案二，添加特殊的样式，覆盖掉原本浏览器默认的样式 */表单提交过一次，再次输入的自动提示，然后选择后，会出现的样式吗？其实，就一个html代码，加了一个form表单，没事好说的。不太清楚这个单词的含义，一般样式的右上角，都会指向我们的。元素背景色为白色，发现居然不生效，颜色并没有改变。第二部，我错愕了一下，不至于吧，随即怀疑可能有使用。第一步，上来我没想太多，直接在控制台，修改。看到这里我才，恍然大悟啊，这不就是浏览器的。，将样式冲突了，开始检查。元素的属性时发现，在。
html输入框密码颜色,css解决浏览器输入框记住账号密码后的背景色
weixin_42394206的博客
06-04 862
谷歌chrome浏览器在用户登录记住密码之后通常会改变input框的背景色，这是每一个程序猿不想看到的事情，下面提出解决这个问题的方法之一：↓ ↓ ↓css代码：input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {-webkit-text-fill-color: #ededed !importan...
input 在浏览中 自动填充后的默认样式 修改
qq_41846172的博客
05-19 3444
在chrom中，我们时长会遇到一个自动填充后，背景颜色变了，不是我们默认的背景颜色。而是白色，这就是因为input标签在默认填充后，会有一个默认的样式 input:-internal-autofill-selected { background-color: rgb(232, 240, 254) !important; background-image: none !important; color: rgb(0, 0, 0) !important; } 如果想要修改，需要覆盖
chrome浏览器中自带input样式input:-internal-autofill-selected（修改input背景色）
江湖行骗老中医
08-15 2386
实现思路1：如果不是想设置为透明色 可直接使用box-shadow input:-webkit-autofill{ -webkit-box-shadow:0 0 0 1000px white inset !important; } 实现思路2：关闭自动填充功能 ( 也可实现 不推荐 ) <input type="text" autocomplete="off"> 实现思路3：通过CSS3动画解决 input:-webkit-autofill, input:-webk
修改自带input样式input:-internal-autofill-selected为透明色
qq_17627195的博客
12-18 7235
input:-internal-autofill-selected { -webkit-text-fill-color: #FFFFFF !important; transition: background-color 5000s ease-in-out 0s !important; }
在vue3中使用ant组库中的表单进表校时验证不通会在input框下出现错误提示如何准确的修改其他中某一个的错误提示的样式
05-26
在使用ant组件库的表单校验时，错误提示的样式可以通过自定义样式来修改。具体步骤如下： 1. 在template模板中，为需要校验的表单项添加`name`属性和`rules`属性，例如： ```html <template> <a-form :form="form"> <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]"> <a-input v-model="form.username"/> </a-form-item> <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]"> <a-input type="password" v-model="form.password"/> </a-form-item> </a-form> </template> ``` 2. 在样式中，使用`::v-deep`伪类选择器来修改错误提示的样式，例如： ```css ::v-deep .ant-form-item-explain { color: red; } ``` 3. 如果需要修改某一个表单项的错误提示样式，可以给该表单项的错误提示添加一个唯一的class，然后在样式中使用该class来修改样式，例如： ```html <template> <a-form :form="form"> <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]"> <a-input v-model="form.username"/> </a-form-item> <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]"> <a-input type="password" v-model="form.password"/> <div class="password-error">密码不能为空</div> </a-form-item> </a-form> </template> <style scoped> ::v-deep .ant-form-item-explain { color: red; } .password-error { color: blue; } </style> ``` 在上面的例子中，我们为密码表单项的错误提示添加了一个class`password-error`，然后在样式中使用该class来修改错误提示的颜色。这样就可以准确地修改某一个表单项的错误提示的样式了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值