【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;随着…

[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…

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;前后端人员进行连调测试。 第四步&…

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

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

苹果电脑下载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竞赛…

概念描述——TCP/IP模型中的两个重要分界线

TCP/IP模型中的两个重要分界线 协议的层次概念包含了两个也许不太明显的分界线&#xff0c;一个是协议地址分界线&#xff0c;区分出高层与低层寻址操作&#xff1b;另一个是操作系统分界线&#xff0c;它把系统与应用程序区分开来。 高层协议地址界限 当我们看到TCP/P软件的…

Eigen中 Row-Major 和 Column-Major 存储顺序的区别

Eigen中 Row-Major 和 Column-Major 存储顺序的区别 flyfish Eigen::RowMajor 是 Eigen 库中用于指定矩阵存储顺序的一种选项 理解 Row-Major 和 Column-Major 存储顺序的区别&#xff0c;绘制一个单一的图来显示内存中的元素访问顺序,在图中用箭头表示访问顺序. import nu…

BarTender软件最新版下载-bartender条码标签打印软件下载

​​BarTender​​是一款遵循“look and feel”标准的​​条码打印​​软件。​​BarTender​​条码打印软件能够帮助用户挥洒自如&#xff0c;轻松制作出标签条码&#xff0c;包括文本、图形、​​条形码​​和大多数序列化功能。BarTender条码打印软件功能强大、操作简单&…

以太坊智能合约不能调用:一定注意智能合约地址,每次部署地址都会变化;nonce值 什么作用,是什么;在交易中调用智能合约添加附加信息

目录 以太坊智能合约不能调用 一定注意智能合约地址,每次部署地址都会变化 Transaction must include these fields: %r" % missing_keys 缺少nonce nonce值 什么作用,是什么 在交易中调用智能合约添加附加信息 1. 定义智能合约 2. 部署并调用智能合约 注意事项…

基于YOLOv10深度学习的高密度人脸智能检测与统计系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

C++之STL(一)

1、泛型程序设计 目的&#xff1a;提供相同的算法&#xff0c;相同的逻辑&#xff0c;来对不同类型的数据结构进行操作。 所以需要将类型当作参数&#xff0c;也就是参数类型化。 2、什么是STL STL是基于模板实现的。编译的时候进行实例化 3、STL组件 4、容器算法迭代器关系 …

使用 Hugging Face 推理终端搭建强大的“语音识别 + 说话人分割 + 投机解码”工作流

Whisper 是当前最先进的开源语音识别模型之一&#xff0c;毫无疑问&#xff0c;也是应用最广泛的模型。如果你想部署 Whisper 模型&#xff0c;Hugging Face推理终端能够让你开箱即用地轻松部署任何 Whisper 模型。但是&#xff0c;如果你还想叠加其它功能&#xff0c;如用于分…