爲自動填充值更改背景輸入字段的顏色

我目前有一個運行bootstrap 2的bootstrap-sass的Rails 4應用程序。我使用localhost進行測試。我有一個登錄屏幕的應用程序。輸入字段爲白色，帶有藍色文本的非常薄的灰色邊框。當我輸入字段時，輸入字段的背景爲白色並帶有藍色文本。但是，當我進入登錄屏幕時，我已經保存了我的登錄信息，信息填滿了字段，但將兩個字段的背景都改爲黃色，文本爲黑色。一個是文本字段，另一個是密碼字段。爲自動填充值更改背景輸入字段的顏色

我想用我在視圖中定義的css來填寫信息。有什麼辦法可以用CSS來做到這一點？我沒有發現這個具體問題。

任何幫助，將不勝感激。我會繼續搜索。

UPDATE 2014年3月28日上午9:15 CDT

我成功地實施了從建議由馬丁更改自動填充背景色鏈路解決方案。我決定猜測並搜索webkit字體顏色文本，並找到解決方案來更改自動填充的字體顏色。

這裏是我的解決方案：

input:-webkit-autofill { 
    -webkit-text-fill-color: $textColor; 
    -webkit-box-shadow: 0 0 0px 1000px white inset; 
} 
input:-moz-autofill { 
    -moz-text-fill-color: $textColor; 
    -moz-box-shadow: 0 0 0px 1000px white inset; 
} 
input:-o-autofill { 
    -o-text-fill-color: $textColor; 
    -o-box-shadow: 0 0 0px 1000px white inset; 
} 
input:-khtml-autofill { 
    -khtml-text-fill-color: $textColor; 
    -khtml-box-shadow: 0 0 0px 1000px white inset; 
}

來源

2014-03-28 Pamela Cook - LightBe Corp

聽起來像Chrome的自動完成 - 你wnat尋找到它 - 這可能給你一些想法：http://stackoverflow.com/questions/2781549/removing-input-background -colour-for-chrome-autocomplete –

Martin，工作正常。請添加它作爲答案，我會檢查它。我的背景現在是白色的。文字是黑色的。我想找到一種方法來改變顏色，但現在這不像改變適合我的配色方案的背景顏色那麼重要。 –

我不得不延長您的解決方案來解決輸入字段：重點爲好。此代碼目前適用於我的需求：

input:-webkit-autofill { 
    -webkit-text-fill-color: $black; 
    -webkit-box-shadow: 0 0 0px 1000px white inset; 
} 
input:-moz-autofill { 
    -moz-text-fill-color: $black; 
    -moz-box-shadow: 0 0 0px 1000px white inset; 
} 
input:-o-autofill { 
    -o-text-fill-color: $black; 
    -o-box-shadow: 0 0 0px 1000px white inset; 
} 
input:-khtml-autofill { 
    -khtml-text-fill-color: $black; 
    -khtml-box-shadow: 0 0 0px 1000px white inset; 
} 

input:focus:-webkit-autofill { 
    -webkit-text-fill-color: $black; 
    -webkit-box-shadow: 0 0 0px 1000px white inset; 
} 
input:focus:-moz-autofill { 
    -moz-text-fill-color: $black; 
    -moz-box-shadow: 0 0 0px 1000px white inset; 
} 
input:focus:-o-autofill { 
    -o-text-fill-color: $black; 
    -o-box-shadow: 0 0 0px 1000px white inset; 
} 
input:focus:-khtml-autofill { 
    -khtml-text-fill-color: $black; 
    -khtml-box-shadow: 0 0 0px 1000px white inset; 
}

來源

2014-05-19 14:57:47 steel

爲自動填充值更改背景輸入字段的顏色

回答

相關問題