仅在焦点上输入自动填充背景黄色(谷歌浏览器)

时间:2015-10-26 23:26:04

标签: css css3 google-chrome

我对谷歌浏览器的输入有问题,即使我添加了我在与此问题相关的其他线程上找到的css代码,它仍然会在鼠标焦点上持续存在。

当输入没有聚焦时,我毫不费力地摆脱它,但是一旦我点击它,它就会变黄。我尝试了几种组合,但到目前为止它还不会消失。

以下是我尝试过的一些例子:

samples_per_sec = 4

我也尝试使用输入的id而不是input:focus:-webkit-autofill { -webkit-box-shadow: 0 1px 1px 1000px #f7f7f7 inset, 0 0 2px rgba(109,157,78,.6); -webkit-text-fill-color: #333; } input:-webkit-autofill:focus { -webkit-box-shadow: 0 1px 1px 1000px #f7f7f7 inset, 0 0 2px rgba(109,157,78,.6); -webkit-text-fill-color: #333; }

这是我的完整css文件(如果需要的话

input

我输入的ID是body { margin: 0; pasdding: 0; position: static; } body.ftp li#current-ftp, body.projects li#current-projects, body.contact li#current-contact { font-weight: bold; text-shadow: 0 0 1px #aaa; } #navbar-header { position: absolute; top: 0; right: 0; left: 0; margin: 0; padding: 0; } #navbar-header #menu-left { float: left; display: inline-block; margin-left: 20px; font-family: 'Comfortaa', cursive; font-size: 16px; line-height: 1; color: #3F3F3F; } #navbar-header #menu-right { float: right; display: inline-block; margin-right: 20px; font-family: 'Comfortaa', cursive; font-size: 16px; line-height: 1; color: #3F3F3F; } #navbar-header ul { display: inline-block; list-style-type: none; margin: 5px 0 0 0; padding: 0; vertical-align: top; font-size: 16px; line-height: 1; } #navbar-header ul.icon li { display: inline-block; padding: 2px; margin: 0; vertical-align: top; } #navbar-header ul.txt li { font-family: 'Comfortaa', cursive; font-size: 16px; color: #3F3F3F; display: inline-block; margin: 0; padding: 8px 0 0 0; } #navbar-header ul.txt li a { font-family: 'Comfortaa', cursive; font-size: 16px; color: #3F3F3F; text-decoration: none; margin: 0; padding: 8px; } #navbar-header ul.txt a:hover { text-shadow: 0 0 1px #666; } #navbar-header #login-menu, #navbar-header #panel-menu { position: absolute; top: 0; right: 0; margin: 0; padding: 0; } #navbar-header #login-bubble { font-family: 'Open Sans', sans-serif; z-index: 5; visibility: hidden; color: #AAAAAA; position: absolute; right: 10px; top: 50px; width: 250px; height: 130px; padding: 0 15px 0 15px; background: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #CCC solid 1px; -moz-box-shadow:0 0 8px 0 #DDD; -webkit-box-shadow:0 0 8px 0 #DDD; box-shadow:0 0 8px 0 #DDD; } #navbar-header #login-bubble:after { content: ''; position: absolute; border-style: solid; border-width: 0 10px 10px; border-color: #FFF transparent; display: block; width: 0; z-index: 1; top: -10px; left: 214px; } #navbar-header #login-bubble:before { content: ''; position: absolute; border-style: solid; border-width: 0 11px 11px; border-color: #DDD transparent; display: block; width: 0; z-index: 0; top: -12px; left: 213px; } #login-username, #login-password { margin-bottom: 15px; } #navbar-header .username-icon { position: absolute; display: block; color: darken(#EDEDED, 10%); left: 23px; top: 15px; font-size: 20px; line-height: normal; } #navbar-header .password-icon { position: absolute; display: block; color: darken(#EDEDED, 10%); left: 25px; top: 62px; font-size: 20px; line-height: normal; } #navbar-header input#txt_username, #navbar-header input#txt_password { font-family: inherit; box-sizing:border-box; border-radius: 3px; font-size: 14px; height: 30px; line-height: 30px; width: 100%; margin: 15px 0 0 0; padding: 0 8px 0 30px ; display: block; background-color : #f7f7f7; border: 1px solid #CCC; transition: 0.3s ease-out; -webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; color: #333; } #navbar-header input#txt_username:focus, #navbar-header input#txt_password:focus { padding: 0 8px 0 10px ; background-color : #f7f7f7; border-color: #a6ba89; outline: 0px; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6); -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 2px rgba(109,157,78,.6) } input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px #fcfcfc inset; -webkit-text-fill-color: #333; } .placeholder {color: #aaa } ::-webkit-input-placeholder {color: #aaa} :-moz-placeholder {color: #aaa} #navbar-header #forgotten-pwd { font-size: 13px; font-family: inherit; margin-top: 12px; display: inline-block; } #navbar-header #forgotten-pwd a { text-decoration: none; color: #999; } #navbar-header #forgotten-pwd a:hover { color: #f48a00; } #button-border { width: 61px; height: 30px; border-bottom-left-radius: 32px; border-bottom-right-radius: 32px; border: 1px solid #CCC; border-top: 0; position: absolute; right: 26px; bottom: -30px; -moz-box-shadow:0 0 8px 0 #DDD; -webkit-box-shadow:0 0 8px 0 #DDD; box-shadow:0 0 8px 0 #DDD; } #submit-button { font-family: inherit; z-index: 1000; position: absolute; top: 105px; right: 34px; } #sub-login { font-family: inherit; width: 45px; height: 45px; display: block; margin: 0 auto -15px auto; background: #f7f7f7; border-radius: 100%; border: 1px solid #a6ba89; color: #a6ba89; font-size: 26px; line-height: 26px; cursor: pointer; box-shadow: 0px 0px 0px 7px #FFF; transition: 0.3s ease-out; } #sub-login:hover, #sub-login:focus { background: #a6ba89; color: #f7f7f7; outline: 0; } #navbar-header #panel-bubble { z-index: 5; visibility: hidden; color: #AAAAAA; position: absolute; right: 0; top: 0; margin-top : 50px; margin-right: 10px; width: 220px; height: 250px; padding: 0px; background: #FFF; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: #CCC solid 1px; -moz-box-shadow:0 0 8px 0 #CCC; -webkit-box-shadow:0 0 8px 0 #DDD; box-shadow:0 0 8px 0 #DDD; } #navbar-header #panel-bubble:after { content: ''; position: absolute; border-style: solid; border-width: 0 10px 10px; border-color: #FFF transparent; display: block; width: 0; z-index: 1; top: -10px; left: 145px; } #navbar-header #panel-bubble:before { content: ''; position: absolute; border-style: solid; border-width: 0 11px 11px; border-color: #DDD transparent; display: block; width: 0; z-index: 0; top: -12px; left: 144px; } #panel-more { border-top: 1px solid #EEE; position: absolute; bottom: 0px; right: 0px; left: 0px; height: 30px; witdth: 100%; background-color: #F7F7F7; font: 16px Candara; text-align: center; vertical-align: middle; color: #909090; padding-top: 3px; } #header-logo { position: relative; width: 333px; margin: 30px auto 15px auto; } #txt_password

以下是表格:

#txt_username

有人知道冲突可能来自哪里吗?

非常感谢你的帮助。

-Apatik

1 个答案:

答案 0 :(得分:0)

你可能已经对它进行了整理,但任何遇到相同问题的人都可以在这里找到解决方案:

Removing input background colour for Chrome autocomplete?

非常接近您最初发布的代码,但不完全相同! :)