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

【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:先加速后减速

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • DGit介绍
  • 使用 ML.NET CLI 自动进行模型训练
  • nginx日志报错信息: The system cannot find the path specified)解决方案
  • 本地快速部署 SuperSonic
  • Nginx缓存之代理缓存配置
  • next是什么???
  • 【Docker实战】jenkins卡在编译Dockerfile的问题
  • Android OTA 升级基础知识详解+源码分析
  • 闲鱼商品详情API:深入解析与应用指南
  • 在 KubeSphere 上快速安装和使用 KDP 云原生数据平台
  • 架构设计 - Nginx Proxy Cache 缓存配置
  • 胡说八道(24.6.17)——STM32以及通信杂谈
  • vue修改node_modules打补丁步骤和注意事项_node_modules 打补丁
  • 数据库系统概述选择简答概念复习
  • 如何实现ElementUI动态表头?
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • 【技术性】Search知识
  • 2017-09-12 前端日报
  • android图片蒙层
  • Angular 响应式表单 基础例子
  • Elasticsearch 参考指南(升级前重新索引)
  • gops —— Go 程序诊断分析工具
  • iOS编译提示和导航提示
  • laravel5.5 视图共享数据
  • Lsb图片隐写
  • mac修复ab及siege安装
  • Redis中的lru算法实现
  • spring security oauth2 password授权模式
  • swift基础之_对象 实例方法 对象方法。
  • Yeoman_Bower_Grunt
  • 基于Mobx的多页面小程序的全局共享状态管理实践
  • 前端每日实战 2018 年 7 月份项目汇总(共 29 个项目)
  • 如何使用 JavaScript 解析 URL
  • 三分钟教你同步 Visual Studio Code 设置
  • 通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout
  • 消息队列系列二(IOT中消息队列的应用)
  • 写给高年级小学生看的《Bash 指南》
  • 原生js练习题---第五课
  • # 详解 JS 中的事件循环、宏/微任务、Primise对象、定时器函数,以及其在工作中的应用和注意事项
  • #1015 : KMP算法
  • $ is not function   和JQUERY 命名 冲突的解说 Jquer问题 (
  • $nextTick的使用场景介绍
  • (145)光线追踪距离场柔和阴影
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (阿里巴巴 dubbo,有数据库,可执行 )dubbo zookeeper spring demo
  • (博弈 sg入门)kiki's game -- hdu -- 2147
  • (翻译)terry crowley: 写给程序员
  • (附源码)springboot社区居家养老互助服务管理平台 毕业设计 062027
  • (介绍与使用)物联网NodeMCUESP8266(ESP-12F)连接新版onenet mqtt协议实现上传数据(温湿度)和下发指令(控制LED灯)
  • (亲测)设​置​m​y​e​c​l​i​p​s​e​打​开​默​认​工​作​空​间...
  • (三)Kafka离线安装 - ZooKeeper开机自启
  • (转) Android中ViewStub组件使用
  • (转)拼包函数及网络封包的异常处理(含代码)
  • * CIL library *(* CIL module *) : error LNK2005: _DllMain@12 already defined in mfcs120u.lib(dllmodu
  • .MyFile@waifu.club.wis.mkp勒索病毒数据怎么处理|数据解密恢复