最近在整理项目的时候,遇到了一个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. [bzoj2302][HNOI2011]problem c 递推,dp

    [HAOI2011]Problem c Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 949  Solved: 519[Submit][Status] ...

  2. 用Keepalived搭建双Nginx server集群,防止单点故障

    综述: 浏览器访问虚拟IP: 192.168.1.57, 该虚拟IP被Keepalived接管,两个Keepalived进程分别运行在物理IP为192.168.1.56和192.168.1.59服务器 ...

  3. visual studio NuGet 常用包管理命令

    visual studio NuGet 常用包管理命令 查找包 Find-Package [包名] Find-Package [包名] -AllVersions 安装包 Install-Package ...

  4. bzoj 4007 树形dp

    题目大意 脸哥最近来到了一个神奇的王国,王国里的公民每个公民有两个下属或者没有下属,这种关系刚好组成一个 n 层的完全二叉树.公民 i 的下属是 2 * i 和 2 * i +1.最下层的公民即叶子节 ...

  5. foj Problem 2283 Tic-Tac-Toe

                                                                                                    Prob ...

  6. POJ3067 Japan

    Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 26270   Accepted: 7132 Description Japa ...

  7. 【CF1017C】The Phone Number(构造)

    题意:要求构造一个1-n的排列,使得它的LIS+LDS最小 n<=1e5 思路:一个百度之星时候从LYY处听来的结论:1-n随机排列的LIS期望是根号级别的 考虑将LIS与LDS都构造成根号级别 ...

  8. 【CF711C】Coloring Trees(DP)

    题意:给你n个数字,一共有m种,如果某数为0则该数为空,空的地方可以填任意种类数,但每填一个数字都要花费一定的费用, 从头到尾,所有相邻且相同的数字看作一个集合,求使n个数字的集合数为k所需的最小费用 ...

  9. 头条PC端的鼠标经过图片放大效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Windwos2008如何关闭IE增强的安全配置

    如题 方法: