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

news2024/11/25 12:57:45

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

解决办法

方法一:设置背景透明

改变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.coloradmin.cn/o/1835484.html

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

相关文章

2024年文献数据库合集分享

无论是刚踏入学术界的新手&#xff0c;还是经验丰富的资深学者&#xff0c;在寻找专业资料时都可能感到头疼&#xff1a;这些资料太专业了&#xff0c;普通网站难以找到... 许多人可能都有过这样的经历&#xff1a;急需一篇论文&#xff0c;却发现只有海外的专业网站才有&#…

企业为何需要搭建线上虚拟品牌展厅?

在数字化时代&#xff0c;线上虚拟品牌展厅已成为企业不可或缺的一部分。以下是构建线上虚拟品牌展厅的4大关键理由&#xff1a; 1、迎合在线购物趋势 随着移动互联网的飞速发展和普及&#xff0c;消费者越来越倾向于在线购物。一个线上虚拟品牌展厅能够完美地满足这一需求&am…

flac格式如何转mp3?7大热门实用音频转换软件大PK

FLAC是Free Lossless Audio Codec&#xff08;免费无损音频编解码器&#xff09;的缩写&#xff0c;是一种在压缩文件大小的同时保留原始音乐质量的音频格式。不过&#xff0c;大多数音频格式都会在音乐质量和文件大小之间做出权衡。当你使用flac获得更好的音乐质量时&#xff…

软考阅卷将完成?!软考成绩有望六月底公布!

2024上半年软考考试已于5月25日-28日举行&#xff0c;考完试后大家最关心的事情莫过于查分了。 一、最新消息 1、不同地区在报名时对成绩公布的时间有所预示&#xff0c;但并没有一个统一的日期举个例子&#xff0c;江苏考区预计在6月下旬公布成绩&#xff0c;而黑龙江考区则预…

echart在线图表demo下载直接运行

echart 全面的数据可视化图表解决方案 | 折线图、柱状图、饼图、散点图、水球图等各类图表展示 持续更新中 三色带下表题速度仪表盘 地图自定义图标 动态环形图饼状图 动态水波动圆形 多标题指针仪表盘 温度仪表盘带下标题 横向柱状图排名 环形饼状图 双折线趋势变化

影响建筑效果图后期时间的因素有哪些?渲染100邀请码1a12

建筑效果图是建筑设计师展示设计方案的重要手段&#xff0c;为了完美展现&#xff0c;我们通常会对效果图进行后期处理&#xff0c;那么影响后期时间的因素有哪些&#xff1f;这次我们来看看吧。 1、底图的质量 底图是指原始的渲染图片&#xff0c;它决定了后期处理的难易程度…

LVGL——(2)基础对象

目录 一、对象简介 二、基础对象简介 1、概念(lv_obj) 屏幕是没有父类的基础对象 屏幕对象的创建过程 LVGL的三层屏幕 2、大小(size) 相关函数 代码示例 3、位置(position) LVGL屏幕的原点 屏幕&#xff08;部件区域&#xff09;的表示 相关函数 LV_ALIGN_...参数…

无代码爬虫八爪鱼采集器-如何采集携程网指定酒店差评信息

场景描述&#xff1a;有一些酒店会分析同行的差评原因&#xff0c;以便提前做预案&#xff0c;避免自己酒店也放同样的错误。他们通过采集携程网指定酒店的提取中差评&#xff0c;使用的采集工具为无代码爬虫软件八爪鱼采集器免费版&#xff0c;下载链接&#xff1a;1.软件分享…

颠覆行业!格行随身WiFi重新定义服务标准,线上线下无缝融合!随身WiFi行业的“海底捞”!随身WiFi哪个品牌最可靠?随身WiFi靠谱推荐!

不得不承认网络销售是现如今的重要销售方式&#xff0c;刚刚结束的618&#xff0c;以及接下来的双11&#xff0c;双12等电商购物节都是异常火爆&#xff0c;可背后也有不同的声音传来&#xff0c;网店现在生意也难做了&#xff1f;消费正回归线下实体经济&#xff1f; 这就是因…

移动硬盘分区误删?专业恢复策略与预防措施

一、认识移动硬盘分区误删 在使用移动硬盘时&#xff0c;有时我们可能会遇到分区误删的情况。这通常指的是由于某种原因&#xff0c;用户错误地删除了移动硬盘上的某个分区&#xff0c;导致该分区内的所有数据丢失。分区误删是一种常见的数据丢失问题&#xff0c;对于用户来说…

计算机组成原理网课笔记2

存储系统基本概念 主存储器的基本组成 半导体元件的原理 存储芯片的基本原理 如何实现不同的寻址方式

【每日刷题】Day68

【每日刷题】Day68 &#x1f955;个人主页&#xff1a;开敲&#x1f349; &#x1f525;所属专栏&#xff1a;每日刷题&#x1f34d; &#x1f33c;文章目录&#x1f33c; 1. 451. 根据字符出现频率排序 - 力扣&#xff08;LeetCode&#xff09; 2. 最小的K个数_牛客题霸_牛客…

暑期计划打卡清单表怎么写 暑期待办计划清单

暑假来临&#xff0c;是不是感觉时间好像突然多了起来&#xff0c;但又不知道该做些什么好&#xff1f;别担心&#xff0c;列一个暑期计划打卡清单表&#xff0c;就能让你的暑假生活变得有条不紊、充实而有意义。 计划清单&#xff0c;就像是给暑假生活绘制的一张地图。没有它…

合肥工业大学人工智能原理课程实验-波士顿房价预测

目录 1.实验内容 2.实验环境 3.实验思路&#xff08;算法分析&#xff09; 4.实验过程、步骤 5.实验结果与评价 6.实验体会与收获 7.附录 1.实验内容 波士顿房地产市场竞争激烈&#xff0c;而你想成为该地区最好的房地产经纪人。为了更好地与同行竞争&#xff0c;你决定运…

宝塔面板使用技巧(pure-FTP)上传文件和文件夹默认权限644的修改

前言 科技在进步各种各样的开源软件和库让我们应接不暇&#xff0c;我估计现在所有做php开发的人员都知道宝塔面板&#xff0c;我就经常用&#xff0c;但是不知道大家出现过一个问题不就是在我们开发过程中需要实时的给服务器上传我们开发的文件那么就涉及到了宝塔自带的pure-F…

Spring Security——结合JWT实现令牌的验证与授权

目录 JWT&#xff08;JSON Web Token&#xff09; 项目总结 新建一个SpringBoot项目 pom.xml PayloadDto JwtUtil工具类 MyAuthenticationSuccessHandler&#xff08;验证成功处理器&#xff09; JwtAuthenticationFilter&#xff08;自定义token过滤器&#xff09; W…

idea Alt+/ 自动补全变量名开头是大写 改 选择小写开头变量名

idea 中自动补全变量名是非常常见的操作&#xff0c;变量名一般都需要小写开头&#xff0c;但是idea中 Alt / 自动补全变量名时 补全的变量名是大写的&#xff0c;这就很难受了。如下图所示&#xff1a; AutowiredLogService LogService;Ctrl 空格 快捷键 虽然不像 Alt / 一…

python进阶:多线程原理python(四)

1.并发的概念python基础 举个例子&#xff1a; 1.1并发与并行 并发&#xff1a;逻辑上具备同时处理多个任务的能力 并行&#xff1a; 物理上在同一时刻执行多个并发任务 1.2什么是线程&#xff0c;什么是进程 开个QQ&#xff0c;开了一个进程;开了迅雷&#xff0c;开了一…

【Seata】分布式事务解决方案——理论

目录 回顾什么是事务数据库事务的四大特性&#xff1a;ACID 分布式事务解释面临挑战分布式事务产生场景1. 单体架构中多数据源场景2. 分布式架构场景 分布式事务解决方案jta AtomikosLCN模式问题 Alibaba的Seata解决分布式事务问题 使用MQ解决分布式事务问题问题1&#xff1a;…

2025年计算机毕业设计题目参考

今年最新计算机毕业设计题目参考 以下可以参考 springboot洗衣店订单管理系统 springboot美发门店管理系统 springboot课程答疑系统 springboot师生共评的作业管理系统 springboot平台的医疗病历交互系统 springboot购物推荐网站的设计与实现 springboot知识管理系统 springbo…