chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

input:-webkit-autofill {

background-color: #FAFFBD;

background-image: none;

color: #000;

}

之前有一种解决方案是禁用autocomplete属性

<input type="text" name="form_email" id="form_email" value="" placeholder="邮箱/手机号" tabindex="1" autocomplete="off">

但是autocomplete="off"在chrome34以后被默认禁用了。

现在有一个hack解决办法：

 input:-webkit-autofill,

    textarea:-webkit-autofill,

    select:-webkit-autofill {

        -webkit-box-shadow: 0 0 0 1000px white inset;

    }

用足够大的纯色阴影去覆盖掉黄色背景

在写实际代码之前做好CSS样式重置可避免一系列稀奇古怪的问题。

一下是各大公司初始化的代码

 

腾讯

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:;padding:}

body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}

a{color:#172c45;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:;vertical-align:middle}

table{border-collapse:collapse;border-spacing:}

p{word-wrap:break-word}

百度

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:;padding:}

html{color:#000;overflow-y:scroll;overflow:-moz-scrollbars-vertical}

body,button,input,select,textarea{font-size:12px;font-family:arial,'Hiragino Sans GB','Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial,Helvetica,STHeiti}

h1,h2,h3,h4,h5,h6{font-size:100%}

em{font-style:normal}

small{font-size:12px}

ul,ol{list-style:none}

a{text-decoration:none}

a:hover{text-decoration:underline}

legend{color:#000}

fieldset,img{border:}

button,input,select,textarea{font-size:100%}

table{border-collapse:collapse;border-spacing:}

img{-ms-interpolation-mode:bicubic}

textarea{resize:vertical}

.left{float:left}

.right{float:right}

.overflow{overflow:hidden}

.hide{display:none}

.block{display:block}

.inline{display:inline}

.error{color:#F00;font-size:12px}

label,button{cursor:pointer}

.clearfix:after{content:'\20';display:block;height:;clear:both}

.clearfix{zoom:}.clear{clear:both;height:;line-height:;font-size:;visibility:hidden;overflow:hidden}

.wordwrap{word-break:break-all;word-wrap:break-word}

pre.wordwrap{white-space:pre-wrap}

body{text-align:center}

body,form{position:relative}

td{text-align:left}

img{border:}

新浪

/* 初始化CSS */

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:; padding:; }

fieldset, img { border:none; }

img{display: block;}

address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

ul, ol { list-style:none; }

input { padding-top:; padding-bottom:; font-family: "SimSun","宋体";}

input::-moz-focus-inner { border:none; padding:; }

select, input { vertical-align:middle; }

select, input, textarea { font-size:12px; margin:; }

input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }

textarea { resize:none; }

table { border-collapse:collapse; }

body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ }

.clearfix:after { content:"."; display:block; height:; visibility:hidden; clear:both; }

.clearfix { zoom:; }

.clearit { clear:both; height:; font-size:; overflow:hidden; }

a { color:#666; text-decoration:none; }

a:visited { color:#666; }

a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

淘宝

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:; padding:; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:; }

网易

html {overflow-y:scroll;}

body {margin:; padding:; font:12px/1.5 \5b8b\4f53,Arial,sans-serif;/*background:#ffffff;*/}

div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:; margin:;}

table,td,tr,th{font-size:12px;}

ol,ul {list-style:none;}

li{list-style-type:none;}

img{vertical-align:top;border:;}

h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:normal;}

address,cite,code,em,th,i{font-weight:normal; font-style:normal;}

.hx a,.hx em,.fB{font-weight:bold;}

.clearfix{*zoom:;}

.clearfix:after{display:block; overflow:hidden; clear:both; height:; visibility:hidden; content:".";}

a {color:#252525; text-decoration:none;}

a:visited {text-decoration:none;}

a:hover {color:#ba2636;text-decoration:underline;}

a:active {color:#ba2636;}

搜狐

/* 全局CSS定义 */

body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:;background:#FFF;font-size:12px;color:#333;}

body > div{text-align:center;margin-right:auto;margin-left:auto;}

div,form,ul,ol,li,span,p{margin:;padding:;border:;}

img,a img{border:;margin:;padding:;}

h1,h2,h3,h4,h5,h6{margin:;padding:;font-size:12px;font-weight:normal;}

ul,ol,li{list-style:none}

table,td,input{font-size:12px;padding:}

/* 默认链接颜色 */

a{outline-style:none;color:#333;text-decoration:none}

a:hover{color:#c00;text-decoration:underline;}

/*清除链接虚框*/

/*a,area {blr:expression(this.onFocus=this.blur()) }  for IE

:focus {-moz-outline-style: none; }  for Firefox

*/

优酷

@charset "utf-8";

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}

audio,canvas,video{display:inline-block;*display:inline;*zoom:}

audio:not([controls]){display:none}

html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}

a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}

a:hover,a:active{outline:}

figure{padding:;margin:}

sub,sup{position:relative;font-size:75%;line-height:;vertical-align:baseline}

sup{top:-0.5em}

sub{bottom:-0.25em}

img{vertical-align:middle;border:;-ms-interpolation-mode:bicubic}

button,input,select,textarea{margin:;font-size:100%;vertical-align:middle}

button,input{*overflow:visible;line-height:normal}

button::-moz-focus-inner,input::-moz-focus-inner{padding:;border:}

button,input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}

input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}

input[type="search"]::-webkit-search-decoration,input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}

textarea{overflow:auto;vertical-align:top}

ol,ul,dl{list-style:none}

body,p,ol,ul,dl{padding:;margin:}

a:link,a:visited{text-decoration:none;color:#555}

a:hover{color:#c31}

a.white{color:#fff}

a.blue{color:#3399e0}

美团

blockquote,body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:;padding:}

table{border-collapse:collapse;border-spacing:}

fieldset,img{border:}

address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:}

li{list-style:none}

caption,th{text-align:left}

h1,h2,h3,h4,h5,h6{font-size:100%}

q:after,q:before{content:''}

abbr,acronym{border:;font-variant:normal}

sup{vertical-align:text-top}

sub{vertical-align:text-bottom}

input,select,textarea{font-family:inherit;font-size:inherit;*font-size:100%;font-weight:inherit}

legend{color:#333}html{background-color:#eee}

body{font:400 14px/1.5 "Hiragino Sans GB","WenQuanYi Micro Hei",tahoma,sans-serif;color:#666;background-color:#fff}

a{color:#2bb8aa;text-decoration:none}a:hover{text-decoration:underline}

h1,h2,h3,h4,h5,h6{font-family:"Hiragino Sans GB"," Microsoft YaHei","WenQuanYi Micro Hei",arial,sans-serif;color:#333;-webkit-font-smoothing:antialiased}

input[type=password]{font-family:arial,sans-serif}
 

YUI

/ *

YUI 3.18.1（建f7e7bcb）

版权所有2014年雅虎公司保留所有权利。

在BSD许可。

http://yuilibrary.com/license/

* /

html{color:#000;background:#FFF}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:;padding:}

table{border-collapse:collapse;border-spacing:}

fieldset,img{border:}

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}

ol,ul{list-style:none}

caption,th{text-align:left}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}

q:before,q:after{content:''}

abbr,acronym{border:;font-variant:normal}

sup{vertical-align:text-top}

sub{vertical-align:text-bottom}

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}

legend{color:#000}

#yui3-css-stamp.cssreset{display:none}
@charset "utf-8";

/* =reset 网页样式重置

html { font-size:1em;-webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight:rgba(0,0,0,0);-webkit-text-size-adjust:none;overflow:-moz-scrollbars-vertical;/*强制firefox出现滑动条*/}

body { font-size:0.75em;}

label { cursor:pointer;}

a:link, a:visited { text-decoration:none;}

input:focus { outline: none; }

input,button,select,textarea{outline:none;/*-webkit-appearance:none;*//*强制去除表单自带的样式*/ }

textarea{resize:none;/*-webkit-appearance:none;*//*强制去除textarea自带的样式*/ }

input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; } /*利用阴影来填充掉input自动填充色*/

textarea,input,select { background: none; border:none; margin:; padding:; }

a, abbr, acronym, address, applet, article, aside, audio, b, blockquote, big, body, center, canvas, caption, cite, code, command, datalist, dd, del, details, dfn, dl, div, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, keygen, label, legend, li, meter, nav, menu, object, ol, output, p, pre, progress, q, s, samp, section, small, span, source, strike, strong, sub, sup, table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var { margin:; padding:;}

article, aside, footer, header, hgroup, nav, section, figure, figcaption { display: block;} /*html5设置*/

h1, h2, h3, h4, h5, h6, th, td, table, input, button, select, textarea, sub{ font-size:1em;}

body, input, button, select, textarea, sub{ font-family:Arial, sans-serif;}

em, cite, address, optgroup { font-style:normal;}

kbd, samp, code { font-family:monospace;}

img, input, button, select, textarea { vertical-align:middle;outline:none;}

ul, ol { list-style:none;}

img, fieldset { border:;}

abbr, acronym { cursor:help; border-bottom:1px dotted black;}

table { width:100%; border-spacing:; border:;}

table th, table td { border:;}

legend, hr { overflow:hidden; position:absolute; top:; left:;}

legend, hr, caption { visibility:hidden; font-size:; width:; height:; line-height:;}

html{height:100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-font-smoothing:antialiased;}

body{margin:;padding:;background-color:#fff;min-height:100%;height:auto !important;height:100%;text-align:center;color:#404040;font:12px/1.5 Helvetica,arial;}

h1,h2,h3,h4,h5,h6,p,figure,form{margin:;}

table{border-collapse:collapse; border-spacing:;}

img{border:;vertical-align:middle;-ms-interpolation-mode: bicubic;}

a{text-decoration:none;color:#29B4F0;}

a:focus {outline: thin dotted;}

a:hover{color:#017CB9;text-decoration:underline;}

/* hn */

h1{font-size:16px;line-height:36px;}

h2{font-size:14px;line-height:30px;}

h3{line-height:24px;}

h3,h4,h5,h6{font-size:12px;}

/* ul ol dl */

ul,li,ol{margin:;padding:;list-style: none outside none;}

ul.has-style li,ol li{margin-left:25px;}

ul.has-style li{list-style:disc;}

ol li{list-style:decimal;}

ul.inline-style li{float:left;display:inline;}

dl{margin-bottom: 18px;}

dt{font-weight: bold;}

dd{margin:0 0 0 9px;padding:;}

svg:not(:root) { overflow: hidden;}

/* clearfix */

.clearfix:before, .clearfix:after {content:""; display:table;}

.clearfix:after{clear:both;overflow:hidden;}

.clearfix{zoom:;}

123

input输入框自动填充黄色背景解决方案的更多相关文章

  1. input输入框自动填充的问题

    火狐浏览器打开页面,input可以自动填充历史输入值,现在想无论input类型是type='text'还是'password'都禁止自动填充,因为我写的页面在input='text'时先检查是否有输入 ...

  2. input框自动填充内容背景颜色为黄色解决方法

    谷歌浏览器input自动填充内容,背景色会是黄色,想改的话: input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;} 这种方 ...

  3. web杂记-禁止输入框自动填充文字

    1:背景 公司基于业务需求开发了一套纯JS的时间控件,本来用得好好得.后来发现在部分浏览器下使用该时间控件会出现输入框自动填充的部分与控件的展示产生了冲突: 如图: 2:问题分析 因为部分浏览太人性化 ...

  4. 消除浏览器对input的自动填充

    在做登录相关的页面时,常遇到这样的现象,浏览器input的自动填充行为. 原因 设置 input 的 type 属性为 password 后,当页面进行过提交,并且允许浏览器记住密码后,那么再次加载该 ...

  5. 谷歌浏览器的input自动填充出现黄色背景解决方案（在已经输入内容之后）

    当你之前提交过表单,再次获取input焦点时,会有一个记录之前填写过的文本的下拉列表式的自动填充效果且带有黄色背景, 这个填充功能本身是没什么问题的,但是谷歌浏览器给了个莫名其妙的黄色背景,用css样 ...

  6. 解决input框自动填充为黄色的问题

    题原因:input 框会自动填充一个颜色  如图所示  解决方法 :通过动画去延迟背景颜色的显示  代码如下 input:-webkit-autofill, textarea:-webkit-auto ...

  7. Chrome表单文本框自动填充黄色背景色样式

    chrome表单自动填充后,input文本框的背景会变成偏黄色的,这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性,然后对其赋予以下样式: ...

  8. input标签自动填充问题

    <input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...

  9. DataList：HTML5中的input输入框自动提示宝器

    DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示,在飞机票火车票的搜索页面上也有这样的效果.它是HTML5里新 ...

随机推荐

  1. 关于STM32空闲中断

    有一次做一个东西,为了尽量不占用CPU的处理数据时间,所以就使用DMA接收串口的数据,但是呢问题来了.,,,,,怎么样才能确定接收到了一条完整的数据了,,我们都知道只要打开DMA 那家伙就不停的把接收 ...

  2. PHP实现记录日志（文件）

    PHP实现记录日志(文件) php php 记录日志 项目中经常会记录些操作信息,或是打印些关键变量,或者是导入excel文件,提现记录,都需记录.经常遇到,封装一个方法,有不好的地方或补充请留言. ...

  3. 【知识整理】惊现RecyclerView内部Bug？？？别急，我们慢慢解决它~

    一.写在前面 这也是久违的一整个月没有写Blog,也是由于近期给妹纸找工作,各种坑蒙拐骗,然而都没卵用.额,广大朋友们,成都需要软件测试.线上运维.产品助理的伙伴,赶紧私聊我了.这妹纸,学习能力挺好, ...

  4. Hadoop的编译

    Hadoop2.4.0  重新编译 64  位本地库 原创作者:大鹏鸟 时间:2014-07-28 环境:虚拟机 VirtualBox,操作系统 64 位 CentOS 6.4 下载重新编译需要的软件 ...

  5. 在Quo.js下Tap和singleTap的区别

    前两天上网搜开发手机页面的JS,看到了Quo.js下载下来后来看了一下,支持的触屏手势挺多的,在一般的开发中应该够用了,更让我喜欢它的一点是它跟JQ差不多(虽然功能不如JQ强大但是语法基本一致).这就 ...

  6. Grunt压缩HTML和CSS

    我的小伙伴们!我明明 在压缩图片之前发过一篇,关于Grunt压缩cCSS是和HTML的!但是不知道为什么,今天再一看.迷之消失了! 没办法.只好今天在写一次,从头开始!首先.我来介绍一下为什么要用构建 ...

  7. [0] JAVABEAN & JAVASERVLET

    Servlet技术是Sun公司提供的一种实现**页的解决方案,它是基于Java编程语言的WEB服务器端编程技术.Servlet技术也是Jsp技术的基础.一个Servlet程序就是一个实现了特殊接口的J ...

  8. w3c编程挑战-初级脚本算法

    之前偶然看到了w3c上的编程挑战题,就像拿来试试手,先做的是初级脚本算法,总体不难,如果有更好的方法,希望能一起交流! 1.翻转字符串 先把字符串转化成数组,再借助数组的reverse方法翻转数组顺序 ...

  9. kaggle Titanic心得

    Titanic是kaggle上一个练手的比赛,kaggle平台提供一部分人的特征,以及是否遇难,目的是预测另一部分人是否遇难.目前抽工作之余,断断续续弄了点,成绩为0.79426.在这个比赛过程中,接 ...

  10. Linux编程之有限状态机FSM的理解与实现

    有限状态机(finite state machine)简称FSM,表示有限个状态及在这些状态之间的转移和动作等行为的数学模型,在计算机领域有着广泛的应用.FSM是一种逻辑单元内部的一种高效编程方法,在 ...