input:-webkit-autofill使输入框变成黄色

方法一:

因为这玩意出现只有在之前有输入记录的情况下才会出现的,所以只有禁用input的记录就能ok!

比如:<input type="text"  autocomplete="off">,如此当你点击了input时它就不会有那一列表了!整个世界也就干净了!当然,如果你能忍受那屎黄色,也可以把它给“on”了,或者不设置,因为autocomplet默认就是'on'的!

不过,很多时候可能需求不允许你去掉简单方便的记录!那可咋整?

于是,

方法二:

-webkit-box-shadow: 0 0 0px 1000px white inset没错,就是给input设置内置阴影!而且一定要大,至少要比你的input本身大!不过,box-shadow是很慢的!而且,如果你的input是用图片做背景的话,是没有办法做这么干的!

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;

}

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

完美解决!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,465评论 0 5
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,351评论 0 11
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,652评论 0 6
  • 这篇文字里我会介绍50 个便于使用的 CSS2/CSS3 代码片段给所有的WEB专业人员. 选择IDE开发环境来存...
    JamHsiao_aaa4阅读 1,324评论 0 3
  • 一、HTML5 1.1 认识HTML5 HTML5并不仅仅只是作为HTML标记语言的一个最新版本,更重要的是它制定...
    福尔摩鸡阅读 16,169评论 14 51