最近在整理项目的时候,遇到了一个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. 数组快速生成range的方法

    //生成[item1-item9]数组 Array(9).join(0).split('').map((item,index) => 'item' + (index+1)) //生成20个对象的 ...

  2. greenplum /postgres 登陆以及创建修改用户密码

    1.greenplum 启动 bin目录下的gpstart  ,-m为只启动master 2.greenplum 启动之后,通过postgresql登陆 登陆命令:PGOPTIONS="-c ...

  3. canvas 转化为 img

    ]; var image = new Image(); image.src = c.toDataURL("image/png"); $("#qrcode canvas&q ...

  4. bzoj 4034 [HAOI2015]树上操作 入栈出栈序+线段树 / 树剖 维护到根距离和

    题目大意 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都 ...

  5. Oracle学习记录1

    1.current_date与sysdate区别 在oracle中current_date与sysdate都是显示当前系统时间, 其结果基本相同,但是有三点区别:a. current_date返回的是 ...

  6. Unity中LoadLevel与LoadLevelAsync的区别

    1.LoadLevel 同步加载 写法:Application.LoadLevel(“name”); 优点:读取场景使用同步的方法就可以,因为是同步方法所以读取的速度是最快的,也不用更新界面,因为同步 ...

  7. scanf()总结--从网上收来的,感觉很好,用来提醒自己,c语言真是博大精深!!【转】

    转自:http://www.cnblogs.com/xiaocai905767378/archive/2011/06/01/2067526.html scanf杂谈          不得不说C语言真 ...

  8. LeetCode OJ--Path Sum *

    https://oj.leetcode.com/problems/path-sum/ 树的深搜,求从根到叶子的路径. 记住深搜的样子 #include <iostream> using n ...

  9. LeetCode OJ--Add Two Numbers

    http://oj.leetcode.com/problems/add-two-numbers/ 将用链表表示的两个数相加,(2 -> 4 -> 3) + (5 -> 6 -> ...

  10. HTTP/1.1标准请求方法和状态码

    HTTP/1.1标准自从1999年制定以来至今仍然是一个应用广泛并且通行的标准 相关文档 RFC2616:Hypertext Transfer Protocol -- HTTP/1.1 在RFC658 ...