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

css设置浏览器表单自动填充时的背景

浏览器自动填充表单内容,会自动设置背景色。对于一般的用户,也许不会觉得有什么,但对于要求比较严格的用户,就会“指手画脚”。这里,我们通过css属性来设置浏览器填充背景的过渡时间,使用户看不到过渡后的背景,达到“清新”的感觉。
通常,浏览器自动填充表单的表现形式如下:
在这里插入图片描述
而我们想要的效果如下:
在这里插入图片描述
通过css设置即可实现上述效果:

:deep(.el-input) {input {height: 38px;&:-webkit-autofill, &:-internal-autofill-selected {transition-delay: 5000s;transition: color 5000s ease-out, background-color 5000s ease-out;-webkit-transition-delay: 5000s;-webkit-transition: color 5000s ease-out, background-color 5000s ease-out;}}
}

通过设置input框的过渡,使input框自动填充的过渡效果在5000s后发生,这样表面上,用户就看不到浏览器设置的背景了。
当然上面也只是实现的一种方法,记得还有一种方法是用div去模拟input输入框,但是实现起来需要花点心思。而上面这种方式简单粗暴,果断采取了。

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

相关文章:

  • windows系统下查看安卓apk的sha1
  • openGauss学习笔记-116 openGauss 数据库管理-设置数据库审计-审计概述
  • python编程复习系列——week2(Input Output (2))
  • 为什么HTTP用得很好的,开始普及HTTPS呢?
  • C++day6作业
  • 【 毕设项目源码推荐 javaweb 项目】 基于 springboot+vue 的图书个性化推荐系统的设计与实现(springboot003)
  • FFmpeg编译hevc版本,支持mac、linux系统
  • AI系统ChatGPT程序源码+AI绘画系统源码+支持GPT4.0+Midjourney绘画+已支持OpenAI GPT全模型+国内AI全模型
  • Unity 3D 调整cube的颜色
  • 数字通信和fpga概述——杜勇版本学习笔记
  • 17.复制字符串 ,包括\0
  • C# List<T>.IndexOf()方法的使用
  • 深入理解JVM虚拟机第十八篇:JVM种局部变量表结构的认识
  • zabbix监控安装-linux
  • 7+差异分析+WGCNA+PPI网络,学会了不吃亏
  • 接口自动化测试
  • SPASS-描述性分析
  • kafka-go操作kafka
  • 如何判断被DDoS攻击
  • web —— html
  • 【C/PTA】数组练习(编程)
  • 力扣:155. 最小栈(Python3)
  • uniapp实现在线PDF文件预览
  • Python tkinter实现复刻Windows记事本UI和菜单的文本编辑器(一)
  • 【系统架构设计】架构核心知识: 3.3 DSSA和ABSD
  • Git的安装和常用命令Git与SVN的区别Gitee远程仓库团队开发代码共享演示
  • 五、计算机网络
  • 使用Grafana与MySQL监控监控网络延迟
  • 互联网常见职称
  • UI设计软件有哪些好用和免费的吗?