2014-03-25 184 views
12

我已經成功地從黃色改變自動填充輸入字段的背景色爲白色用下面的代碼:改變字體顏色

input.login:-webkit-autofill { 
    -webkit-box-shadow: 0 0 0 1000px white inset; 
} 

然而,改變字體顏色僅通過灰色加入color: #999;不起作用。我怎麼能解決這個問題?非常感謝!

回答

26

嘗試以下CSS

input:-webkit-autofill { 
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */ 
    -webkit-text-fill-color: #999; 
} 
input:-webkit-autofill:focus { 
    -webkit-box-shadow: /*your box-shadow*/,0 0 0 50px white inset; 
    -webkit-text-fill-color: #999; 
} 
+0

這段代碼有效,但只適用於mozila。我們怎麼能做到這一點鉻... ..? –

-2
input:-webkit-autofill { 
    color: #999 !important; 
} 

這會適合你!

+1

你甚至沒有正確地做它....也沒有,不要使用'!重要'。 **注意:**就像這樣 - 'color:#999!important;' – Ruddy

+0

@Ruddy:謝謝,我已經更新了我的答案。你能告訴我,爲什麼我們不應該使用重要的?我對css不太熟悉,但我知道答案,所以回答。 – 2014-03-25 10:52:53

+1

看看這個[**頁面**](http://css-tricks.com/when-using-important-is-the-right-choice/)。它是一個很好的閱讀。對於這個我不覺得有必要使用'!important'只是在有另一種方式去做時感覺很懶惰。 – Ruddy

2

嘗試下面的CSS:

/* Change Autocomplete styles in Chrome*/ 
input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus 
input:-webkit-autofill, 
textarea:-webkit-autofill, 
textarea:-webkit-autofill:hover 
textarea:-webkit-autofill:focus, 
select:-webkit-autofill, 
select:-webkit-autofill:hover, 
select:-webkit-autofill:focus { 
    border: 1px solid green; 
    -webkit-text-fill-color: green; 
    -webkit-box-shadow: 0 0 0px 1000px #000 inset; 
    transition: background-color 5000s ease-in-out 0s; 
} 

我們可以使用-webkit-autofill僞選擇針對那些領域,他們的風格,因爲我們認爲合適的。