1. 問題
-
填充之前顏色
image.png -
填充之后顏色
image.png
背景顏色會自動發(fā)生改變
2. 解決方案
2.1 第一種方法：(適用于vue element-ui框架)
- css設置背景色
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}
- input標簽添加autocomplete=“off” 指定某個文本框取消自動填充
<el-input type="text" v-model="name" placeholder="請輸入賬號" autocomplete="off" ></el-input>
- form表單添加autocomplete=“off” 取消所有文本框元素的自動填充
<el-form autocomplete="off">
</el-form>
2.2 第二種方法 （設置背景透明）
- 改變input自動填充背景顏色
//改變input自動填充背景顏色
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
-webkit-text-fill-color: #808080;
transition: background-color 1000s ease-out 0.5s;
}
- transiton（過渡）詳解：
一握侧、語法
transition: property duration timing-function delay
transition屬性是個復合屬性呼畸，她包括以下幾個子屬性：
transition-property ：規(guī)定設置過渡效果的css屬性名稱
transition-duration ：規(guī)定完成過渡效果需要多少秒或毫秒
transition-timing-function ：指定過渡函數(shù)莱睁，規(guī)定速度效果的速度曲線
transition-delay ：指定開始出現(xiàn)的延遲時間
默認值分別為：all 0 ease 0
注：transition-duration 時長為0待讳，不會產(chǎn)生過渡效果
二、transition-timing-function屬性：
- ease:由快到慢到更慢
- linear:恒速
- ease-in:越來越快
- ease-out:越來越慢
- ease-in-out:先加速后減速
