【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.mfbz.cn/a/721924.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于SpringBoot+Vue企业会议室预定管理系统设计和实现

基于SpringBootVue企业会议室预定管理系统设计和实现 &#x1f345; 作者主页 网顺技术团队 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; &#x1f345; 文末获取源码联系方式 &#x1f4dd; &#x1f345; 查看下方微信号获取联系方式 承接各种定制系统 …

一招教你房间内灰尘多怎么处理?除粉尘好用的空气净化器分享

在你吸尘、扫地、擦家具的时候&#xff0c;你或许会奇怪&#xff0c;为什么灰尘每天擦&#xff0c;每天有&#xff1f;即使门窗关得好好的&#xff0c;过几天还是会落上一层薄薄的灰。它们究竟是什么&#xff1f;对我们的健康又有什么影响呢&#xff1f;我们每天生活在房屋中&a…

模型部署onnx入门

一、定义 1.定义 2. 环境安装 3. 案例 4. 可视化界面 5. 参考网址 6. 推理引擎 onnx Runtime 进行单张图片推理&#xff0c;本地部署 7. 推理引擎onnx Runtime 进行单张图片推理&#xff0c;调用摄像头获取画面 8. 推理引擎onnx Runtime 进行图片推理&#xff0c;调用摄像头获…

Spring Cloud 专题-配置篇(2)

关注微信公众号&#xff1a;IT技术馆 Spring Cloud 是一个基于 Spring Boot 构建的云应用开发工具集&#xff0c;它为开发人员提供了在分布式系统中快速实现常见模式&#xff08;如配置管理、服务发现、断路器等&#xff09;的能力。下面是一个简化的示例&#xff0c;展示如何…

结构思考力:让你的思维更有条理

在这个信息爆炸的时代&#xff0c;如何让自己的思维更有条理&#xff0c;更高效地沟通显得尤为重要。最近读了《结构思考力》一书。今天&#xff0c;我想和大家分享一下读后感&#xff0c;从以下几个方面展开&#xff1a;1. 什么是结构思考力及其重要性&#xff1b;2. 为什么要…

JavaScript日期对象、DOM节点操作(查找、增加、克隆、删除)

目录 1. 日期对象2. DOM节点操作2.1 查找节点2.2 增加节点2.3 克隆节点2.4 删除节点 1. 日期对象 实例化日期对象&#xff1a; 获取当前时间: new Date()获取指定时间: new Date(2023-12-1 17:12:08) 日期对象方法: 方法作用说明getFullYear()获得年份获取四位年份getMonth…

设计可持续数据中心的基本要素

在当今的商业环境中&#xff0c;数据处理中心&#xff08;DPC&#xff09;的重要性日益凸显&#xff0c;它们为海量数据提供稳定的存储、处理和传输服务。随着数据处理中心重要性的不断提升&#xff0c;构建一个具有弹性和可靠性的基础设施变得至关重要。本文将深入探讨构建可持…

Qt做群控系统

群控系统顾名思义&#xff0c;一台设备控制多台机器。首先我们来创造下界面。我们通过QT UI设计界面。设计界面如下&#xff1a; 登录界面&#xff1a; 登录界面分为两种角色&#xff0c;一种是管理员&#xff0c;另一种是超级管理员。两种用户的主界面是不同的。通过选中记住…

获取泛型,泛型擦除,TypeReference 原理分析

说明 author blog.jellyfishmix.com / JellyfishMIX - githubLICENSE GPL-2.0 获取泛型&#xff0c;泛型擦除 下图中示例代码是一个工具类用于生成 csv 文件&#xff0c;需要拿到数据的类型&#xff0c;使用反射感知数据类型的字段&#xff0c;来填充表字段名。可以看到泛型…

LabVIEW开发为什么沟通需求非常重要

在LabVIEW开发项目中&#xff0c;需求沟通是项目成功的基石。以下是需求沟通的重要性及其原因&#xff1a; 明确项目目标&#xff1a; 定义清晰的目标&#xff1a;通过与用户的沟通&#xff0c;可以明确项目的目标和范围&#xff0c;确保开发团队理解用户的实际需求&#xff0c…

JavaFX DatePicker

JavaFX DatePicker允许从给定日历中选择一天。DatePicker控件包含一个带有日期字段和日期选择器的组合框。JavaFX DatePicker控件使用JDK8日期时间API。 import javafx.application.Application; import javafx.scene.Scene; import javafx.scene.control.DatePicker; import j…

SpringBoot的事务注解

SpringBoot的事务注解 在Spring Boot应用中&#xff0c;事务管理是一个关键的部分&#xff0c;尤其是当涉及到数据库操作时。Spring Boot提供了强大的事务管理支持&#xff0c;使得开发人员可以通过简单的注解来控制事务的边界和行为。本文将介绍如何在Spring Boot中使用事务注…

Go - 4.数组和切片

目录 一.引言 二.定义 1.基础定义 2.引申理解 三.实战 1.估算切片的长度与容量 2.切片的切片长度与容量 四.拓展 1.估算切片容量的增长 2.切片底层数组的替换 五.总结 一.引言 本文主要讨论 Go 语言的数组 array 类型和切片 slice 类型。主要从二者的使用方法&…

C++ 65 之 模版的局限性

#include <iostream> #include <cstring> using namespace std;class Students05{ public:string m_name;int m_age;Students05(string name, int age){this->m_name name;this->m_name age;} };// 两个值进行对比的函数 template<typename T> bool …

PCIe学习——重点提纲

PCIe学习-重点提纲 基础知识 计算机架构基础总线系统概述PCI vs PCI-X vs PCIe PCIe 概述 PCIe 的发展历史PCIe 与其他总线的对比PCIe 的优势和应用场景 PCIe 体系结构 PCIe 分层模型 物理层&#xff08;Physical Layer&#xff09;数据链路层&#xff08;Data Link Layer&…

在 KubeSphere 上快速安装和使用 KDP 云原生数据平台

作者简介&#xff1a;金津&#xff0c;智领云高级研发经理&#xff0c;华中科技大学计算机系硕士。加入智领云 8 余年&#xff0c;长期从事云原生、容器化编排领域研发工作&#xff0c;主导了智领云自研的 BDOS 应用云平台、云原生大数据平台 KDP 等产品的开发&#xff0c;并在…

[Java基本语法] 常量变量与运算符

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;线程与…

解决Java项目运行时错误:“Command line is too long”

在开发Java应用的过程中&#xff0c;你可能偶尔会遇到“Error running ‘Application’: Command line is too long”的问题。这是因为Java虚拟机&#xff08;JVM&#xff09;在启动时&#xff0c;如果传递给它的类路径&#xff08;classpath&#xff09;过长&#xff0c;超过了…

1080 MOOC期终成绩

solution 输出合格的学生信息&#xff0c;其中所谓合格需要同时满足 在线编程成绩>200总评成绩>60 总评计算方法为 当期中成绩>期末成绩时&#xff0c;总评期中成绩0.4期末成绩0.6否则&#xff0c;总评期末成绩 通过map建立学号和学生信息间的关联&#xff0c;否则直…

YOLOv10改进 | 注意力篇 | YOLOv10引入Polarized Self-Attention注意力机制

1. Polarized Self-Attention介绍 1.1 摘要:像素级回归可能是细粒度计算机视觉任务中最常见的问题,例如估计关键点热图和分割掩模。 这些回归问题非常具有挑战性,特别是因为它们需要在低计算开销的情况下对高分辨率输入/输出的长期依赖性进行建模,以估计高度非线性的像素语…