最近在整理项目的时候,遇到了一个chrome浏览器自动填充的样式问题,

用户名跟密码的input都设置为透明颜色,但是会变成黄色,打开chrome调试工具,发现有个input:-webkit-autofill的 background-color: rgb(250, 255, 189)!important;这个样式,网上查询得三种方案,一种是把input自动输入关闭autocomplete="off",第二种是设置box-shadow阴影覆盖默认样式,

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
-webkit-text-fill-color: #333;
}

  但是这种只适用于纯色背景

  第三种是通过延长增加自动填充背景色的方式, 是用户感受不到样式的变化

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-transition-delay: 99999s;
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
}

  

  由于我这里输入框是背景为透明,选择第二种并没有效果,所以选择第三种。

  总结:网上的方法很多,但要找到适合自己的解决方案。

关于input:-webkit-autofill样式问题的更多相关文章

  1. 【转】自定义(滑动条)input[type="range"]样式

    1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome:  ...

  2. css input[type=file] 样式美化,input上传按钮美化

    css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh

  3. 设置input的placeholder样式

    自定义input默认placeholder样式 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 inpu ...

  4. input[type='file']样式美化及实现图片预览

    前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...

  5. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

  6. 关于前端滚动条,input框等样式的修改

    1.改变滚动条的样式 .orderList::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.o ...

  7. 定制 input[type="radio"] 和 input[type="checkbox"] 样式

    表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...

  8. input placeholder属性 样式修改(颜色,大小,位置)

    placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

  9. html5中如何更改、去掉input type默认样式

    1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...

  10. html中input提示文字样式修改

    在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...

随机推荐

  1. Multiset ------ 多重集合

    Multiset的中文名是多重集合,其实就是集合的扩展版.唯一的不同是集合中一个值只能出现一次,而多重集合中一个值可以出现多次. 粗略看了看MSDN,在STL中,multiset和set的成员函数声明 ...

  2. HDU——1982Kaitou Kid - The Phantom Thief (1)(坑爹string题)

    Kaitou Kid - The Phantom Thief (1) Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/327 ...

  3. [luoguP3355] 骑士共存问题(二分图最大独立集)

    传送门 模型 二分图最大独立集,转化为二分图最大匹配,从而用最大流解决. 实现 首先把棋盘黑白染色,使相邻格子颜色不同. 把所有可用的黑色格子看做二分图X集合中顶点,可用的白色格子看做Y集合顶点. 建 ...

  4. python -- DNS处理模块dnspython

    简介 dnspython – 是python实现的一个DNS工具包,利用其查询功能来实现dns的服务监控及解析结果的校验 安装dnspython pip install dnspython 使用 常见 ...

  5. Cmder 快捷键

    1, Cmder常用快捷键 利用Tab,自动路径补全: 利用Ctrl+T建立新页签:利用Ctrl+W关闭页签; 利用Ctrl+Tab切换页签; Alt+F4:关闭所有页签 Alt+Shift+1:开启 ...

  6. HDU6214 Smallest Minimum Cut

    题目链接:HDU6214 留一个链式前向星+Dinic模板(希望不要被某人发现,嘿嘿嘿). #include <cstdio> #include <cstring> #incl ...

  7. vs-react-插件

  8. linux grep 查找文件内容

    自试: wang@wang:~$ grep -i "*args*" ~/IGV01-SW/src/bzrobot_diagnostics/bzrobot_lightbelt_man ...

  9. QBXT T15214 Day2上午遭遇

    题目描述 你是能看到第一题的 friends呢. -- hja ?座楼房,立于城中 . 第?座楼,高度 ℎ?. 你需要一开始选择座楼,跳. 在第 ?座楼准备跳需要 ??的花费. 每次可以跳到任何一个还 ...

  10. soursTree新建过程.md

    网上博客 https://www.cnblogs.com/tian-xie/p/6264104.html 主要的推送流程 完成所有项目的远程推送工作 点击git工作流选择第二个建立新的版本; 输入发布 ...