当前位置: 首页 > news >正文

设置 文本框 自动填充背景颜色 为白色

关于autofill伪类的 兼容性:

在现代浏览器中,包括Chrome、Safari、Firefox等,都支持:autofill伪类,但在使用时必须加上浏览器前缀-webkit-,即:-webkit-autofill

在旧版的浏览器中,可能不支持:autofill伪类,需要使用其他的hack方法来实现。同时,不同浏览器也可能对:-webkit-autofill的支持程度不同,需要根据实际情况来选择合适的hack方法。


经测试,貌似不用-webkit-autofill也可以。某些情境下可能需要使用 :-webkit-autofill伪类。具体情况,具体分析。【以下 方法中的 属性值 最好都加 "! important",以绝后患!】

方法一:box-shadow

input:-webkit-autofill {color: transparent;background-clip: content-box;background-color: white;caret-color: black;/*光标设置为 黑色*//*上面根据具体情境 可选,box-shadow最重要!!*/-webkit-box-shadow: 0 0 0 1000px white inset !important;box-shadow: 0 0 0 1000px white inset !important;
}

浏览器的 自动填充机制 在 渲染页面 之后 才会生效,会覆盖设置的CSS样式。为了解决这个问题,你可以使用 transition 属性来延迟样式的生效时间。。。。

方法二:-webkit-text-fill-color 和 transition: background-color 5000s ease-in-out 0s;

input {/*必须为background-color属性(即便这里没有设置background-color)、或all 加上 过渡效果,不然不会生效!!*/-webkit-text-fill-color: #333333 !important;transition: background-color 5000s ease-in-out 0s;
}

方法三:background-color 和 transition: background-color 5000s ease-in-out 0s;

input {/*必须为background-color属性、或all 加上 过渡效果,不然不会生效!!*/background-color: white !important;transition: background-color 5000s ease-in-out 0s;
}

啰嗦一下:

/* 三合一,遇到问题再调整 */
input:-webkit-autofill {box-shadow: 0 0 0 30px white inset !important;-webkit-text-fill-color: #333333 !important;background-color: white !important;transition: background-color 5000s ease-in-out 0s;
}

http://www.lryc.cn/news/63723.html

相关文章:

  • Bitmap引起的OOM问题
  • 【JavaEE初阶】认识线程(Thread)
  • 自动化运维工具一Ansible Roles实战
  • json 中有递归parentId节点转 c#实体类时如何处理
  • 给大家介绍几个手机冷门但好用的小技巧
  • 2.3 定点乘法运算
  • C++每日一练:打家劫室(详解动态规划法)
  • Wireshark使用
  • 这才是 SpringBoot 统一登录鉴权、异常处理、数据格式 的正确姿势
  • Java面试题总结 | Java面试题总结6-MYSQL模块(持续更新)
  • Linux命令集(Linux文件管理命令--mv指令篇)
  • 不一样的 Git 之间 | GitLab vs GitHub vs Gitee vs GitCode
  • 海尔牵头IEEE P2786国际标准通过Sponsor投票并连任工作组主席
  • 倾斜摄影超大场景的三维模型的顶层合并的纹理压缩与抽稀处理技术分析
  • linux命令之iostat详解
  • 【C++】程序员必备知识:认识类与对象
  • python基础实战5-python基本结构
  • 移动端异构运算技术 - GPU OpenCL 编程(基础篇)
  • QString类方法和变量简介(全)
  • 中移链控制台对接4A平台功能验证介绍
  • 必知的Facebook广告兴趣定位技巧,更准确地找到目标受众
  • 【MySQL】慢查询+SQL语句优化 (内容源自ChatGPT)
  • HashMap底层源码解析及红黑树分析
  • 科技云报道:一路狂飙的ChatGPT,是时候被监管了
  • 第四十四章 管理镜像 - 传入日记传输率
  • 加密解密学习笔记
  • Spring 属性填充源码分析(简单实用版)
  • 【机器学习分支】重要性采样(Importance sampling)学习笔记
  • 三角回文数+123
  • JAVA常用的异步处理方法总结