关于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;
}

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

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

转载于:https://www.cnblogs.com/qingfengliuyun092815/p/10412462.html

关于input:-webkit-autofill样式问题相关推荐

Input placeholder属性样式修改(颜色,大小,位置)
Input placeholder属性样式修改(颜色,大小,位置) input::-webkit-input-placeholder {/* placeholder颜色 */color: #aab2b ...
elemen-UI 组件：input输入框的样式、代码、效果图对比 - 应用篇
elemen-UI 输入框组件的样式问题:+栅格系统使用可定义宽度等细节处理提示:具体参考项目为准. 效果图对比: 代码如下:(2种) <el-form :model="form& ...
为type=file的input标签制定样式——CSS基础
为type=file的input标签制定样式 1. 概述 2. 实验 3. 解决方法与解析 1. 概述在现在的前端开发中,为了开发的效率,大都会引入第三方库加快开发速度.查阅官方文档,一顿复制黏贴, ...
html input文本框样式,css设置input文本框样式代码实例_html/css_WEB-ITnose
css设置input文本框样式代码实例: 使用css设置input元素的样式是最为常用的操作之一,当然也是最为基础的操作,可能对于刚刚接触css的朋友还不够熟悉,下面就通过一段简单的代码历史演示一下如 ...
CSS_css去掉input标签的默认样式，去除input点击样式
去掉input标签的默认样式,去除input点击样式 outline: none; input {background: none;outline: none;border: none; }
修改input输入框的样式
原文地址为: 修改input输入框的样式我们在写表单的时候,经常需要自定义表单的样式,当然input输入框也不例外,那么如何能写出好看一点的输入框呢? 下面我们来写个简单的表单 <form a ...
html input文本框样式,css 定义input文本输入框样式
摘要腾兴网为您分享:css 定义input文本输入框样式,找乐助手,长江e号,一点英语,天天爱等软件知识,以及多功能盒子,方寸天地,斗音,蚊声,奶牛牧场,聚好商城,滞纳金计算器,反p2p终结者,lo ...
#input框#默认样式#：怎么修改点击之后的边框的样式
目录前言一.how? 总结前言在我们的项目的样式设计中,input框的默认样式,一般是满足不了我们的需求.所以,我们就要改变input框的默认样式.这里我们将设置input框的样式中,获取焦点 ...
input file修改样式
input file的样式比较丑,直接进行修改时,无法修改其中按钮的样式. 只需简单的三步就可以搞定: 第一步: 将input file进行隐藏: #file {display: none; } 第二 ...
input placeholder的样式
在input框中有时想将输入的字和placeholder设为不同的颜色或其它效果,这时就可以用以下代码来对placeholder进行样式设置了. ::-webkit-input-placeholder ...

关于input:-webkit-autofill样式问题

关于input:-webkit-autofill样式问题相关推荐

最新文章

热门文章