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.mzph.cn/news/135472.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python--快速入门三

Python--快速入门三 1.Python列表 列表是Python用于储存一系列数据的容器(特点是可以存放不同类型的数据) python_list ["键盘",True,66,88.8] 列表是可变数据类型,可以直接对列表中的元素进行更改而不需要赋值给本身 列表方法: 1.appen…

Ubuntu22.04安装MySql

在Ubuntu上安装mysql就比较简单了 1、常规操作,更新软件包列表 apt update 至少安装之前看一眼版本吧 apt list mysql-server 嗯,是8.0.35版本的 2、安装mysql apt install mysql-server 3、给root用户设置密码 # 第一次安装完无需密码,让你输入…

Mysql关联查询

Mysql关联查询 1、数据准备 # 班级表 create table class(id int primary key auto_increment,name varchar(20),description varchar(100) );# 学生表 create table student(id int primary key auto_increment,sn varchar(20),name varchar(20),email varchar(20),class_id…

快速搭建UmiJS4.0项目及常见问题解决方案

yarn create umi选择项目类型 ○ Pick Umi App Template │ Simple App选择创建工具 ○ Pick Npm Client │ yarn选择源 ○ Pick Npm Registry │ taobao启用 Prettier(可选) yarn umi g √ Pick generator type Enable Prettier -- Setup Pr…

剑指JUC原理-15.ThreadLocal

👏作者简介:大家好,我是爱吃芝士的土豆倪,24届校招生Java选手,很高兴认识大家📕系列专栏:Spring源码、JUC源码🔥如果感觉博主的文章还不错的话,请👍三连支持&…

大语言模型比武

今年随着 ChatGPT 的流行,并在各个领域有一定程度生产级别的应用。国内外也掀起了一股大语言模型浪潮,各大厂商都推出了自己的大语言模型,阿里推出了 通义千问,腾讯推出了 Hunyuan,亚马逊云推出了 Titan,大…

Spring中Bean的作用域

2023.11.8 默认情况下&#xff0c;Spring的IoC容器创建的Bean对象是单例的。下面测试一下&#xff1a; 创建一个bean类&#xff1a; package spring6.beans;public class SpringBean { }配置一下xml文件&#xff1a; <?xml version"1.0" encoding"UTF-8&…

【C++】万字一文全解【继承】及其特性__[剖析底层化繁为简](20)

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.继承&复用&组合的区别1&…

web框架与Django

web应用程序 什么是web Web应用程序是一种可以通过Web访问的应用程序&#xff0c;程序的最大好处是用户很容易访问应用程序&#xff0c;用户只需要有浏览器即可&#xff0c;不需要再安装其他软件 应用程序有两种模式C/S、B/S。C/S是客户端/服务器端程序&#xff0c;也就是说这…

web3案例中解决交易所中 ETH与token都是0问题 并帮助确认展示是否成功

可能写了这么久 很多人会发现一个问 我们前面的案例 个人在交易所中的 自定义token 和 ETH 一直是放了个0 大家也不太敢确认是否真的有效 那么 很简单 我们操作 存入一些进交易所 不就ok了 我们 来看之前交易所写的代码 我们写了 depositEther 存入 ETH 和 depositToken 存入…

企业微信开启接收消息+验证URL有效性

企业微信开启接收消息验证URL有效性 &#x1f4d4; 千寻简笔记介绍 千寻简笔记已开源&#xff0c;Gitee与GitHub搜索chihiro-notes&#xff0c;包含笔记源文件.md&#xff0c;以及PDF版本方便阅读&#xff0c;且是用了精美主题&#xff0c;阅读体验更佳&#xff0c;如果文章对…

[云原生案例2.2 ] Kubernetes的部署安装 【单master集群架构 ---- (二进制安装部署)】网络插件部分

文章目录 1. Kubernetes的网络类别2. Kubernetes的接口类型3. CNI网络插件 ---- Flannel的介绍及部署3.1 简介3.2 flannel的三种模式3.3 flannel的UDP模式工作原理3.4 flannel的VXLAN模式工作原理3.5 Flannel CNI 网络插件部署3.5.1 上传flannel镜像文件和插件包到node节点3.5.…

Django框架简介

文章目录 Django框架介绍MVC与MVT模型MVCMTV 版本问题运行django注意事项 Django的下载与基本命令下载Django方式一&#xff1a;在命令界面使用pip安装方式二&#xff1a;使用pycharm安装 Django的基础命令命令行操作pycharm操作 Django项目命令行操作与Pycharm操作的区别应用D…

【K-means聚类算法】实现鸢尾花聚类

文章目录 前言一、数据集介绍二、使用步骤1.导包1.2加载数据集1.3绘制二维数据分布图1.4实例化K-means类&#xff0c;并且定义训练函数1.5训练1.6可视化展示2.聚类算法2.1.可视化生成3其他聚类算法进行鸢尾花分类 前言 例如&#xff1a;随着人工智能的不断发展&#xff0c;机器…

ubuntu20.04 安装cudnn

中文地址是.cn&#xff1a;cuDNN 历史版本 | NVIDIA 开发者 英文地址是.com&#xff1a;cuDNN 历史版本 | NVIDIA 开发者 1、下载cudnn&#xff1a;cudnn-local-repo-ubuntu2004-8.8.1.3_1.0-1_amd64.deb 解压并安装&#xff1a;sudo dpkg -i cudnn-local-repo-ubuntu2004-8.8…

ICC2与PT端口时序上的差别

我正在「拾陆楼」和朋友们讨论有趣的话题,你⼀起来吧? 拾陆楼知识星球入口 有星球成员遇到如下问题: 你好,我想问一下就是之前一直遇到一个情况:INtoReg的path_group的时序报告,ICC2里launch的clock network delay(propagated)会有一个值,skew就很小。 但是到PT里launc…

​软考-高级-信息系统项目管理师教程 第四版【第22章-组织通用治理-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第22章-组织通用治理-思维导图】 课本里章节里所有蓝色字体的思维导图

从F5 BIG-IP RCE漏洞(CVE-2023-46747)来看请求走私的利用价值

0x01 前言 F5 BIG-IP广域流量管理器是一种网络流量管理设备&#xff0c;用于提升链路性能与可用性。F5在金融行业具有特别广泛的使用量&#xff0c;做过各大银行攻防演练的小伙伴对这个系统应该不会陌生。 最近爆出的CVE-2023-46747漏洞能达到远程RCE的效果&#xff0c;属于严重…

9.spark自适应查询-AQE之动态调整Join策略

目录 概述动态调整Join策略原理实战 动态优化倾斜的 Join原理实战 概述 broadcast hash join 类似于 Spark 共享变量中的广播变量&#xff0c;Spark join 如果能采取这种策略&#xff0c;那join 的性能是最好的 自适应查询AQE(Adaptive Query Execution) 动态调整Join策略 原…

代码随想录算法训练营第四十六天丨 动态规划part09

198.打家劫舍 思路 如果刚接触这样的题目&#xff0c;会有点困惑&#xff0c;当前的状态我是偷还是不偷呢&#xff1f; 仔细一想&#xff0c;当前房屋偷与不偷取决于 前一个房屋和前两个房屋是否被偷了。 所以这里就更感觉到&#xff0c;当前状态和前面状态会有一种依赖关系…