【css】如何修改input选中历史选项后,自动填充的蓝色背景色

自动填充前:
在这里插入图片描述自动填充后:
在这里插入图片描述

解决办法

方法一:设置背景透明

改变input自动填充背景颜色

  // 通过拉长过渡时间,和延迟过渡开始时间,掩盖input自动填充背景颜色input:-internal-autofill-previewed,input:-internal-autofill-selected {transition: background-color 1500s ease-out 10s;}
方法二:(vue element-ui框架)

css设置背景色

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

input标签添加autocomplete=“off” // 指定某个文本框取消自动填充

<el-input type="text" v-model="name"  placeholder="请输入账号" autocomplete="off" ></el-input>

form表单添加autocomplete=“off” // 取消所有文本框元素的自动填充

<el-form autocomplete="off"></el-form>

transiton(过渡)详解:

(1)语法

  • transition: property duration timing-function delay
  • transition属性是个复合属性,她包括以下几个子属性:
  • transition-property :规定设置过渡效果的css属性名称
  • transition-duration :规定完成过渡效果需要多少秒或毫秒
  • transition-timing-function :指定过渡函数,规定速度效果的速度曲线
  • transition-delay :指定开始出现的延迟时间
    默认值分别为:all 0 ease 0

PS:transition-duration 时长为0,不会产生过渡效果

(2)transition-timing-function属性:

  • ease:由快到慢到更慢
  • linear:恒速
  • ease-in:越来越快
  • ease-out:越来越慢
  • ease-in-out:先加速后减速

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/855087.shtml

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

相关文章

护眼灯是智商税吗?严防存在四大智商税的劣质护眼灯

护眼台灯这类产品相比大家也是很熟悉了&#xff0c;无论是中小学生的家里还是的婴幼儿的家里都几乎都配备着这样一盏护眼灯&#xff0c;但是随着使用护眼灯的人越来越多&#xff0c;网络上就出现了一些关于护眼灯皮肤色素沉着、视网膜损伤、睡眠障碍等安全问题&#xff0c;随着…

递归:汉诺塔问题III

题目 题目描述 约 19 世纪末&#xff0c;在欧洲的商店中出售一种智力玩具:在一块铜板上有三根杆&#xff0c;最左边的杆自上而下、由小到大顺序串着由 64 个圆盘构成的塔。目的是将最左边杆上的圆盘全部移到右边的杆上,条件是一次只能移动一个圆盘&#xff0c;并且不允许大圆盘…

一文理清GO语言日志库实现开发项目中的日志功能(rotatelogs/zap分析)

一文理清GO语言日志库实现开发项目中的日志功能&#xff08;rotatelogs/zap分析&#xff09; rotatelogs rotatelogs 是一个用于管理日志文件的 Go 语言库&#xff0c;它提供了自动轮换、压缩和删除旧日志文件的功能。这个库可以帮助你更好地管理和维护你的应用程序日志。要使…

《HTML趣味编程》专栏内资源的下载链接

目录 关于专栏 博主简介 专栏内资源的下载链接 写在后面 关于专栏 本专栏将持续更新,至少含有30个案例,后续随着案例的增加可能会涨价,欢迎大家尽早订阅!(订阅后可查看专栏内所有文章,并且可以下载专栏内的所有资源) 博主简介 ⭐ 2024年百度文心智能体大赛 Top1⭐…

[Qt] Qt Creator 编译输出乱码,问题页中的报错、警告内容,编译输出乱码

确保文件编码为"UTF-8"&#xff0c;"如果编码是UTF-8则添加"&#xff0c;如下图&#xff1a; 设置IDE环境语言跟随系统语言&#xff0c;Text codec for tools&#xff1a; "System" 瑞斯拜

frp安装与配置

个人从网上杂乱的信息中学习、试错&#xff0c;记录自己成功配置的方法&#xff0c;避免遗忘 一、frp的下载 因目前无法下载&#xff0c;仅保留下载方法&#xff0c;版本号根据实际修改&#xff0c;目前使用0.54版&#xff0c;不同系统下载不同文件。 wget https://github.c…

docker安装fastdfs详细教程

目录 一、前言 二、安装步骤 1、搜索fastdfs镜像 2、拉取镜像,这里我们用delron/fastdfs安装 3、运行镜像 三.查看或修改配置文件 1、进入storage容器 2、查看 storage.conf 配置文件 3、查看nginx配置文件 四、测试文件上传 一、前言 fastdfs是一个开源的分布式文件系…

AI在医学中神奇应用

2022年11月30日&#xff0c;可能将成为一个改变人类历史的日子——美国人工智能开发机构OpenAI推出了聊天机器人ChatGPT-3.5&#xff0c;将人工智能的发展推向了一个新的高度。2023年11月7日&#xff0c;OpenAI首届开发者大会被称为“科技界的春晚”&#xff0c;吸引了全球广大…

空气质量预报模式系统WRF-CMAQ

空气污染问题日益受到各级政府以及社会公众的高度重视&#xff0c;从实时的数据监测公布到空气质量数值预报及预报产品的发布&#xff0c;我国在空气质量监测和预报方面取得了一定进展。随着计算机技术的高速发展、空气污染监测手段的提高和人们对大气物理化学过程认识的深入&a…

pdfFactory虚拟打印机软件下载-pdfFactory虚拟打印机官方最新版下载附加详细安装步骤

pdffactory是一款办公软件&#xff0c;帮助用户更好的进行文件处理&#xff0c;轻松查询使用&#xff0c;不用担心故障的问题&#xff0c;而且打印速度快&#xff0c;效率高&#xff0c;保障用户日常打印轻松。 安 装 包 获 取 地 址&#xff1a; FinePrint-安装包 &#xff1…

OSPF开销、协议优先级、定时器(华为)

#交换设备 OSPF开销值 如果没有定义OSPF接口的开销值&#xff0c;OSPF会根据该接口的带宽自动计算其开销值。 计算公式&#xff1a; 接口开销 带宽参考值 / 接口带宽 &#xff08;取整数部分&#xff0c;结果小于1时取1&#xff09;通过改变带宽参考值可以间接改变接口的开…

苍穹外卖---导入接口文档

一、前后端分离开发流程 第一步&#xff1a;定义接口&#xff0c;确定接口的路径、请求方式、传入参数、返回参数。 第二步&#xff1a;前端开发人员和后端开发人员并行开发&#xff0c;同时&#xff0c;也可自测。 第三步&#xff1a;前后端人员进行连调测试。 第四步&…

Spring IOC(控制反转)和DI(依赖注入)在Spring框架中的核心作用

1.1 IoC&#xff08;控制反转&#xff09;和DI&#xff08;依赖注入&#xff09;在Spring框架中的核心作用 IoC&#xff08;控制反转&#xff09;&#xff1a; IoC是一种编程思想&#xff0c;其目标是将对象的创建和依赖关系的维护从应用程序代码中分离出来&#xff0c;交给一…

Postman接口测试之postman设置接口关联,实现参数化

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 postman设置接口关联 在实际的接口测试中&#xff0c;后一个接口经常需要用到前一个接口返回的结…

beego项目发布到linux

beego项目发布到linux 1.打包应用程序2.上传压缩包&#xff08;beego-blog.tar.gz&#xff09;到服务器指定目录3.解压缩包4.先进入项目目录5.添加执行权限6.后台运行beego程序7.nginx配置域名及反向代理8.浏览器访问域名查看网站 1.打包应用程序 bee pack -be GOOSlinux2.上传…

PAT B1012. 数字分类

题目描述 给定一系列正整数,请按要求对数字进行分类,并输出以下五类数字: Al-能被5整除的数字中所有偶数的和; A2将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2n3-n4…; A3被5除后余2的数字的个数; A4被5除后余3的数字的平均数,精确到小数点后一位; A5被5除后余4的…

苹果电脑下载vite包错

苹果电脑下载vite包错/Users/lili/.npm/_cacache/index-v5/c5/50/b451703d03b3802b9ee6b7ff2b0bde4de7f26830eb52c904d6911c137cf8包错解决方式 解决方式&#xff1a;sudo chown -R 501:20 "/Users/wangxin/.npm"

PCI-E 5.0固态硬盘温度价格「双降」,速度近15GB/s

都 2024 年了&#xff0c;相信各位同学对固态硬盘都不陌生了吧。 随着技术的不断更新迭代&#xff0c;固态硬盘接口速率如今最高已经来到了 PCI-e 5.0 了。 其实这不算什么新技术了&#xff0c;早在2023年5月美光就上市了全球首款 PCI-e 5.0 固态硬盘&#xff0c; 英睿达 T700…

Python学习打卡:day09

day9 笔记来源于&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了 目录 day964、字典课后习题65、5类数据容器的总结对比数据容器分类数据容器特点对比 66、数据容器的通用操作遍历统计len、max 和 min 转换list(容器)、…

算法基础精选题单 枚举 (合适的枚举顺序+合适的枚举内容+前缀和和差分) (个人题解)

前言&#xff1a; 今日第一份题解&#xff0c;题目主要是于枚举有关&#xff0c;枚举算是算法题中较为简单的部分了&#xff08;对我来说还是有些难想的&#xff09;&#xff0c;话不多说&#xff0c;见下。 正文&#xff1a; 题单&#xff1a;237题】算法基础精选题单_ACM竞赛…