关于input:-webkit-autofill样式问题
最近在整理项目的时候,遇到了一个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样式问题的更多相关文章
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 设置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 ...
- input[type='file']样式美化及实现图片预览
前言 上传图片是常见的需求,多使用input标签.本文主要介绍 input标签的样式美化 和 实现图片预览. 用到的知识点有: 1.input标签的使用 2.filelist对象 和 file对象 3 ...
- css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...
- 关于前端滚动条,input框等样式的修改
1.改变滚动条的样式 .orderList::-webkit-scrollbar {/*滚动条整体样式*/ width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ height: 4px;}.o ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- input placeholder属性 样式修改(颜色,大小,位置)
placeholder属性 样式修改 <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...
- html5中如何更改、去掉input type默认样式
1.如何去掉input type=date 默认样式 HTML代码: 选择日期:<input type="date" value="2017-06-01" ...
- html中input提示文字样式修改
在很多网站上我们都看到input输入框显示提示文字,让我们一起来看看如果在input输入框中显示提示文字.我们只需要在<input>标签里添加:placeholder="提示文字 ...
随机推荐
- AIX 常用命令 第一步(uname,lspv)
如何知道自己在运行单处理器还是多处理器内核? /unix 是指向已启动内核的符号链接.要了解正在运行什么内核模式,可输入 ls -l /unix 并查看 /unix 链接到什么文件.下面是 ls -l ...
- faster-rcnn 目标检测 数据集制作
本文的目标是制作目标检测的数据集 使用的工具是 python + opencv 实现目标 1.批量图片重命名,手动框选图片中的目标,将目标框按照一定格式保存到txt中 图片名格式(批量) .jpg . ...
- pytesseract的使用
首先,先安装好Tesseract软件,pytesseract模块 问题 1 :FileNotFoundError: [WinError 2] 系统找不到指定的文件. 加上这行代码 pytesserac ...
- Linux内核之网络
应用层: 套接字将Unix一切都是内核的概念应用到网络连接中,内核跟用户空间套接字之间的接口实现在c的标准库中,使用了socketcall系统调用. socketcall充当了一个多路分解器,将各种任 ...
- Yii createCommand CURD操作
本文用作工作记录,也许有人会问为什么不用 Yii 的 Model 去操作 DB,原因很简单,Yii 的 Model 写法上是方便了很多,但是会执行多余的 SQL,打开 Yii 的执行 log 就会发现 ...
- 关于vsftp所遇问题
问题:使用ftp工具上传文件时提示 553 Could not create file.错误: 严重文件传输错误解决方法:除了检查ftp服务外,需要使用 getsebool -a|grep ftp, ...
- LeetCode OJ--Reverse Nodes in k-Group **
http://oj.leetcode.com/problems/reverse-nodes-in-k-group/ 链表 指针 对链表翻转的变形 #include <iostream> ...
- shell - cut 使用举例
cut 使用举例 说明:此命令是对输入的每行字符串进行按照指定字符或者指定字节或者指定字段进行截取,并输出到标准输出. 参数如下: -b:以字节单位分割,这个参数不适用于中文,因为一个英文占用1个字节 ...
- BZOJ题目(持续更新)
bzoj1009:kmp想法+递推+矩阵快速幂.很好的想法,考虑用长串去kmp匹配短串,dp[i][j]表示匹配指针分别指在i.j位置时候,前i位母字符串一共有多少种可能性,那么dp[i][j]=Σd ...
- Codeforces A. Bear and Big Brother
...不行.这题之后.不做1000分以下的了.很耻辱 A. Bear and Big Brother time limit per test 1 second memory limit per t ...