博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
input输入框自动填充黄色背景解决方案
阅读量：4454 次
发布时间：2019-06-07

本文共 13290 字，大约阅读时间需要 44 分钟。

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

input:-webkit-autofill {
   background-color: #FAFFBD;background-image: none;color: #000;}

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

 

但是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:0;padding:0}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:0;vertical-align:middle}table{
      border-collapse:collapse;border-spacing:0}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:0;padding:0}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:0}button,input,select,textarea{
      font-size:100%}table{
      border-collapse:collapse;border-spacing:0}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:0;clear:both}.clearfix{
      zoom:1}.clear{
      clear:both;height:0;line-height:0;font-size:0;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:0}

 

新浪

/* 初始化CSS */html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {
       margin:0; padding:0; }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:0; padding-bottom:0; font-family: "SimSun","宋体";}input::-moz-focus-inner {
       border:none; padding:0; }select, input {
       vertical-align:middle; }select, input, textarea {
       font-size:12px; margin:0; }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:0; visibility:hidden; clear:both; }.clearfix {
       zoom:1; }.clearit {
       clear:both; height:0; font-size:0; 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:0; padding:0; }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:0; }button, input, select, textarea {
       font-size:100%; }table {
       border-collapse:collapse; border-spacing:0; }

 

网易

html {
      overflow-y:scroll;}body {
      margin:0; padding:0; 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:0; margin:0;}table,td,tr,th{
      font-size:12px;}ol,ul {
      list-style:none;}li{
      list-style-type:none;}img{
      vertical-align:top;border:0;}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:1;}.clearfix:after{
      display:block; overflow:hidden; clear:both; height:0; 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:0;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:0;padding:0;border:0;}img,a img{
       border:0;margin:0;padding:0;}h1,h2,h3,h4,h5,h6{
       margin:0;padding:0;font-size:12px;font-weight:normal;}ul,ol,li{
       list-style:none}table,td,input{
       font-size:12px;padding:0}/* 默认链接颜色 */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:1}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:0}figure{
       padding:0;margin:0}sub,sup{
       position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{
       top:-0.5em}sub{
       bottom:-0.25em}img{
       vertical-align:middle;border:0;-ms-interpolation-mode:bicubic}button,input,select,textarea{
       margin:0;font-size:100%;vertical-align:middle}button,input{
       *overflow:visible;line-height:normal}button::-moz-focus-inner,input::-moz-focus-inner{
       padding:0;border:0}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:0;margin:0}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:0;padding:0}table{
       border-collapse:collapse;border-spacing:0}fieldset,img{
       border:0}address,caption,cite,code,dfn,em,var{
       font-style:normal;font-weight:400}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:0;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:0;padding:0}table{
       border-collapse:collapse;border-spacing:0}fieldset,img{
       border:0}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:0;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: 0; padding: 0; }  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:0; padding:0;}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:0;}abbr, acronym {
       cursor:help; border-bottom:1px dotted black;}table {
       width:100%; border-spacing:0; border:0;}table th, table td {
       border:0;}legend, hr {
       overflow:hidden; position:absolute; top:0; left:0;}legend, hr, caption {
       visibility:hidden; font-size:0; width:0; height:0; line-height:0;}

 

html{
      height:100%;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-webkit-font-smoothing:antialiased;}body{
      margin:0;padding:0;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:0;}table{
      border-collapse:collapse; border-spacing:0;}img{
      border:0;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: 0;padding:0;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:0;}svg:not(:root) {
       overflow: hidden;}/* clearfix */.clearfix:before, .clearfix:after {
      content:""; display:table;}.clearfix:after{
      clear:both;overflow:hidden;}.clearfix{
      zoom:1;}

 

 

123

转载于:https://www.cnblogs.com/herozhou/p/7197715.html

你可能感兴趣的文章
2019-8-10 考试总结
查看>>
hdu 4308 Saving Princess claire_(bfs,4级)
查看>>
JAVA学习之工厂方法模式,工厂类用反射功能实现
查看>>
C# Java 3DES加密解密 扩展及修正\0 问题
查看>>
C# ThreadState属性分析
查看>>
C#request 请求响应
查看>>
bzoj3745: [Coci2015]Norma 分治，单调队列
查看>>
HDU 2612 Find a Way
查看>>
如何实时查看mysql当前连接数?
查看>>
C#串口通信：MSComm控件使用详解
查看>>
配置maven和创建maven项目
查看>>
squid 3.5.2配置文件
查看>>
linux中解决出现：^H^H^H^H
查看>>
SQL SERVER 安装出现 “性能计数器注册表配置单元一致性”检查失败 的问题
查看>>
WUSTOJ 1298: 操作格子（Java）
查看>>
第一章整理
查看>>
POJ 2689 Prime Distance （素数筛选法，大区间筛选）
查看>>
HDU 4901 多校4 经典计数DP
查看>>
iOS通过dSYM文件分析crash
查看>>
使用行为树(Behavior Tree)实现游戏AI
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-10-12 21:25:22   当前IP: 3.145.60.58   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我