1. 程式人生 > >Chrome表單如何去掉預設的淡黃色背景及如何關閉瀏覽器自帶填充表單功能?

Chrome表單如何去掉預設的淡黃色背景及如何關閉瀏覽器自帶填充表單功能?

1、原因:表單自動填充元素在chrome下會有一個預設樣式 (如下),並且優先順序最高,無法覆蓋(!important也無法覆蓋)。

input:-webkit-autofill {
    background-color: rgb(250, 255, 189);
    background-image: none;
    color: rgb(0, 0, 0);
}

2、解決方法一:[1]input文字框是純色背景的,可以對input:-webkit-autofill使用足夠大的純色內陰影來覆蓋input輸入框的黃色背景

input:-webkit-autofill {-webkit-box-shadow: 
0 0 0px 1000px white inset;
border1px solid #CCC!important;}

如果你有使用圓角等屬性,或者發現輸入框的長度高度不太對,可以對其進行調整,除了chrome預設定義的background-color,background-image,color不能用!important提升其優先順序以外,其他的屬性均可使用!important提升其優先順序,如:

input:-webkit-autofill {-webkit-box-shadow: 000px1000pxwhiteinset;border1pxsolid#CCC!important;height27px!important
;line-height27px!important;border-radius: 04px4px0;
}

[2]input文字框是使用圖片背景的

把背景圖片拿出來,獨立成為一個標籤如<label></label>等。

3、解決方法二:關閉瀏覽器自帶填充表單功能

<!-- 對整個表單設定 -->
<form autocomplete="off" method=".." action="..">
<!-- 或對單一元素設定 -->
<input type="text" name="textboxname" autocomplete="off">