当前位置: 首页 > news >正文

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

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

解决办法

方法一:设置背景透明(通过拉长过渡时间,和延迟过渡开始时间,掩盖input自动填充背景颜色)

PS:注意,这个过渡效果会在你的delay time + transition time的时间长度后,完成过渡效果,也就是说
如下例:透明色仅能支持到1510s,就会出现蓝色背景,这个值可以设置成24小时,避免用户一直在这个页面不动,但是性能较差,不是很推荐

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

仅提供autocomplete="off"属性及属性值off,即可禁用历史下拉列表,避免出现自动填充色

<Input placeholder="请输入账号" autocomplete="off"></Input>
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.lryc.cn/news/379361.html

相关文章:

  • 红队内网攻防渗透:内网渗透之内网对抗:网络通讯篇防火墙组策略入站和出站规则单层双层C2正反向上线解决方案
  • linux 查看进程启动方式
  • 基于Java实训中心管理系统设计和实现(源码+LW+调试文档+讲解等)
  • 第2章 Android应用的界面编程
  • springboot学习-图灵课堂-最详细学习
  • Total CAD Converter与Total Excel Converter软件分享
  • 【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 启动多任务排序(200分) - 三语言AC题解(Python/Java/Cpp)
  • 【会议征稿,JPCS出版】第三届电力系统与能源技术国际学术会议(ICPSET 2024,7月5-7)
  • 【机器学习300问】118、循环神经网络(RNN)的基本结构是怎样的?
  • loveqq-framework 和 thymeleaf 整合遇到的 th:field 的坑,原来只有 spring 下才有效
  • hugging face:大模型时代的github介绍
  • 如何快速绘制logistic回归预测模型的ROC曲线?
  • 实现具有多个实现类的接口并为每个实现类定义一个名字的方法
  • Linux解压缩命令
  • 如何在 Ubuntu 14.04 上使用 Iptables 实现基本防火墙模板
  • jasypt对yml文件进行加密解密
  • vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务
  • npm、yarn、pnpm 最新国内镜像源设置和常见问题解决
  • Qt Object:智能即时聊天室项目
  • php,python aes加密反解
  • 基于Java学生选课管理系统设计和实现(源码+LW+调试文档+讲解等)
  • 阅读笔记——《Large Language Model guided Protocol Fuzzing》
  • C#委托:事件驱动编程的基石
  • Git的下载安装及可视化工具小乌龟
  • 【面试实战】# 并发编程之线程池配置实战
  • Pytest 读取excel文件参数化应用
  • qt 一个可以拖拽的矩形
  • C# 启动exe 程序
  • Netty中的Reactor模型实现
  • dll丢失应该怎么解决,总结5种解决DLL丢失问题的方法